javascript - 无法使用 slickgrid + Knockout 进行排序

Question

我能够创建 knockout 模型并使用自定义绑定(bind)加载 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 进行 knockout 自定义绑定(bind)是如何完成的。所以我无法理解如何使用 knockout 部分订阅 onSort。

Answer 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% 漂亮，但确实有效。