如何保存可排序列表订单

时间:2018-02-09 03:20:27

标签: javascript jquery meteor sortables

我正在使用流星平台。我开发了一个仪表板。Here each job1,job2,job3 under project are sortable.smitha,...test1 are dashboard Names

现在我想在用户点击保存按钮时保存排序列表的顺序,并按照他保存的顺序显示。

我使用Dragula包实现了可排序。

status.js

Template.status.events({
'click .outr':function(){
  var drake=dragula([document.querySelector('.sortable-items')]);  
  },
});

status.html

<div class="ui bottom attached segment" style="border-radius:0.5em;margin-left:0.0%; overflow:hidden;padding:0 0 0 0;">
  <div class="ui menu grids vbox " style="border-radius:0.5em;margin-top:0; overflow:hidden;" id="vbox">
    {{#each getDash}}      
      <div class=" column equal width aligned padded center aligned outr">
        <div class="ui vertical allifluid small menu hand rock icon " style="background-color:lightgray;  border: 0.5px solid black;">
          <center><p class="handle" style="width:4 5 6 2">{{this.project}}</p></center>
          <div class="sortable-items" >
          {{#each listjobName project}}
            <div class="ui inverted small menu jbox" style="background-color:{{getStatusColor buildStatus}};   border: 1px solid black;">
            <p id="viewJob" class="under" ><h5>{{this.job}}</h5></p>
            </div>
          {{/each}}
          </div>
        </div>
      </div>
    {{/each}}
  </div>
</div>

在status.html this.projectthis.job中分别使用帮助getDashlistjobName从数据库中获取。

1 个答案:

答案 0 :(得分:0)

只需将订单存储在集合中的文档中即可。 例如,您可以使用名为Projects的Collection。数据结构看起来像这样:

{
    _id: 'herh52rh48a6eh7a86e7hz'
     projectName: 'tes1';
     jobs : [
          {
               id: 54845 (Random generated id)
               name: 'job1',
               order: 1
          },
          {
               id: 87813
               name: 'job2',
               order: 2
          },
          {
               id: 54369
               name: 'job3',
               order: 3
          },
     ]
}

对于每项工作,您都有一个字段order

您需要使用数组“作业”来显示作业列表。当你点击保存时,你必须得到工作和他们的订单。并将其存储在数据库中。

我不知道怎么用dragula做,所以我会让你找到一种方法。也许这个答案会给你一个想法。