如何使用敲除更改 table 的行顺序。拖放或使用 Up/Down 按钮

Question

如何使用敲除更改 table 的行顺序。我有 fiddle:

使用敲除-sortable.js。例子

请协助。我的fiddle如下：

JSFiddle 示例

  [1]:http://jsfiddle.net/rniemeyer/hw9B2/
  [2]:https://jsfiddle.net/nagarajputhiyavan/x9vc10zu/3/

Answer 1

因为 Knockout 的整个想法是你使用你的数据模型并且 Knockout 保持 UI 与之同步，所以根本问题只是简单地重新排序你的数组（它需要是一个 observableArray 让 Knockout 注意到它的变化）。

在您建议的两种方法中，“向上”和“向下”按钮更简单，因此我采用了这种方法。我为每一行添加了向上和向下按钮，并为第一行禁用了向上按钮，为最后一行禁用了向下按钮。

向上按钮 click 绑定到一个 moveUp 函数，该函数拼接当前行并将其拼接成一行向上。 Down 做同样的事情，但是拼接成一排向下。

var AppModel = function() {
  var self = this;
  
  this.itemsToReceive = ko.observableArray([{
    RecordId: 1,
    IsPriority: true,
    IsInTransit: true,
    IsSpecialRecall: true
  }, {
    RecordId: 2,
    IsPriority: false,
    IsInTransit: true,
    IsSpecialRecall: true
  }, {
    RecordId: 3,
    IsPriority: false,
    IsInTransit: true,
    IsSpecialRecall: true
  }]);
  
  this.moveUp = function(data) {
    var idx = self.itemsToReceive.indexOf(data),
      tmp = self.itemsToReceive.splice(idx, 1);

    self.itemsToReceive.splice(idx - 1, 0, tmp[0]);
  };
  
  this.moveDown = function(data) {
    var idx = self.itemsToReceive.indexOf(data),
      tmp = self.itemsToReceive.splice(idx, 1);

    self.itemsToReceive.splice(idx + 1, 0, tmp[0]);
  };
  
  this.loadGridServerSide = function() {
    self.itemsToReceive([{
      RecordId: 1,
      IsPriority: true,
      IsInTransit: true,
      IsSpecialRecall: true
    }]);
  }
}

ko.applyBindings(new AppModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<button data-bind="click: loadGridServerSide" class="btn btn-primary">Server Side Invoke</button>
<table class="table static-table table-bordered table-hover no-bottom-margin">
  <thead>
    <tr>
      <th>Item Number</th>
      <th>Priority?</th>
      <th>Transit?</th>
      <th>SpecialRecall?</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: itemsToReceive">
    <tr>
      <td data-bind="text: RecordId"></td>
      <td>
        <input type="checkbox" data-bind="checked: IsPriority" />
      </td>
      <td>
        <input type="checkbox" data-bind="checked: IsInTransit" />
      </td>
      <td>
        <input type="checkbox" data-bind="checked: IsSpecialRecall" />
      </td>
      <td>
        <button data-bind="disable: $index() === 0, click: $parent.moveUp">Up</button>
        <button data-bind="disable: $index() === $parent.itemsToReceive().length - 1, click: $parent.moveDown">Down</button>
      </td>
    </tr>
  </tbody>
</table>

使用拖放会稍微复杂一些，因为重新排序发生在 UI 中并且需要反映到数据模型中。您将在自定义绑定处理程序中执行此操作，并且 such a handler has been written. Here is an article about it.

如何使用敲除更改 table 的行顺序。拖放或使用 Up/Down 按钮

How to change row order of table using knock out. Either drag and drop or using Up/Down buttons

jquery

html

knockout.js

knockout-sortable