Question

我能够创建挖空模型并使用自定义绑定加载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。

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％漂亮，但它有效。

无法使用slickgrid + knockout排序

1 个答案: