jquery - 如何使用 knockout 更改表的行顺序。拖放或使用向上/向下按钮

Question

如何使用 knockout 更改表格的行顺序。我有 fiddle :

使用 knockout-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 绑定(bind)到一个 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 中，需要反射(reflect)到数据模型中。您将在自定义绑定(bind)处理程序中执行此操作，并且 such a handler has been written .这是 an article about it .