Question

我使用以下函数根据名为sort的整数值对observableArray进行排序：

model.sortColumns = function (a, b) {
  return a.Order > b.Order ? 1 : -1;
};

model.sortedColumns = ko.dependentObservable(function () {
  return this.reportFields.slice().sort(this.sortColumns);
}, model);

我正在使用foreach在屏幕上显示它们并且一切正常，我现在需要做的是提供foreach中改变顺序的能力。我打算用点击事件放上简单的向上/向下箭头图标，但我不确定如何改变它，有没有人做过这样的事情呢？

Answer 1

这是一篇关于排序和排序的精彩文章：http://www.knockmeout.net/2011/05/dragging-dropping-and-sorting-with.html

在本文中，所有魔术都是通过使用自定义绑定完成的：

  ko.bindingHandlers.sortableList = {
      init: function(element, valueAccessor) {
          var list = valueAccessor();
          $(element).sortable({
              update: function(event, ui) {
                  //retrieve our actual data item
                  var item = ui.item.tmplItem().data;
                  //figure out its new position
                  var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
                  //remove the item and add it back in the right spot
                  if (position >= 0) {
                      list.remove(item);
                      list.splice(position, 0, item);
                  }
              }
          });
      }
  };

<div data-bind="foreach: sortedColumns, sortableList: sortedColumns"></div>

循环和重新排序可观察数组

1 个答案: