1

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

4

1 回答 1

0

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

所以在这里，借助这里的许多好的答案（通过dependentObservable 使用 Knockoutjs 更新 SlickGrid）和这个（https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-multi-column-排序.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% 漂亮，但它确实有效。

于 2013-11-27T17:24:51.993 回答