无法使用 slickgrid + 淘汰赛进行排序答案

【问题标题】：unable to sort using slickgrid + knockout无法使用 slickgrid + 淘汰赛进行排序
【发布时间】：2013-11-27 11:43:41
【问题描述】：

我能够创建淘汰模型并使用自定义绑定加载 slikgrid。我在 JSFIddle 中关注了这个例子：http://jsfiddle.net/joybroto/bwSmy/4/

但我无法为列添加排序。通过 slickgrid 文档，我必须将 sortable: true 添加到列中。我做到了。

还有文档 (https://github.com/mleibman/SlickGrid/wiki/Getting-Started) 说排序应该通过“通过监听 onSort 方法”来实现：

slickgrid.onSort.subscribe(function(e, args){ // args: sort information. 
        var field = args.sortCol.field;

        rows.sort(function(a, b){
            var result = 
                a[field] > b[field] ? 1 :
                a[field] < b[field] ? -1 :
                0;

            return args.sortAsc ? result : -result;
        });

        slickgrid.invalidate();         
    });

我 100% 不明白如何使用 slickgrid 完成淘汰自定义绑定。所以我无法理解如何使用淘汰赛部分订阅 onSort。

【问题讨论】：

我遇到了同样的问题。我在 init: 部分代码中添加了事件订阅，通过调试我知道它会触发。我还可以看到许多行对被比较并输出 1 或 -1，然后网格确实无效。但它会像最初一样显示出来。如果您自己找到答案，请在此处发布！谢谢

标签： javascript jquery knockout.js slickgrid

【解决方案1】：

我明白了。您必须单独保留对数据设置的引用，并对它们进行排序，而不是 args 参数中的那些。

这里有很多很好的答案（Updating SlickGrid with Knockoutjs via dependentObservable）和这个（https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-multi-column-sort.html）。它基于多列排序：

var grid;
var gridData;
ko.bindingHandlers.slickGrid = {
    init: function (element, valueAccessor) {
        var settings = valueAccessor();
        gridData = ko.toJS(settings.data); // instead of ko.utils.unwrapObservable(settings.data) since within my ObservableArray there are Observables.
        var columns = ko.utils.unwrapObservable(settings.columns);
        var options = ko.utils.unwrapObservable(settings.options) || {};
        grid = new Slick.Grid(element, gridData, columns, options);

        grid.onSort.subscribe(function (e, args) {
            var cols = args.sortCols;

            gridData.sort(function (dataRow1, dataRow2) {
                for (var i = 0, l = cols.length; i < l; i++) {
                    var field = cols[i].sortCol.field;
                    var sign = cols[i].sortAsc ? 1 : -1;
                    var value1 = dataRow1[field], value2 = dataRow2[field];
                    var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
                    if (result != 0) {
                        return result;
                    }
                }
                return 0;
            });
            grid.invalidate();
    });
},
    update: function (element, valueAccessor, allBindingAccessor, viewModel) {
        var settings = valueAccessor();
        gridData = ko.toJS(settings.data); //just for subscription
        grid.setData(gridData, false);
        grid.resizeCanvas(); // NB Very important for when a scrollbar appears
        grid.render();
    }

};

它不是 100% 漂亮，但它确实有效。

【讨论】：