简单的 Slickgrid 排序不起作用

Question

这个 Slickgrid 示例不起作用是否有明显的原因。基本上它不会按点击列排序。

        var grid;

        var columns = [
        {id:"title", name:"Title", field:"title", sortable: true},
        {id:"duration", name:"Duration", field:"duration", sortable: true},
        {id:"%", name:"% Complete", field:"percentComplete", sortable: true},
        {id:"start", name:"Start", field:"start", sortable: true},
        {id:"finish", name:"Finish", field:"finish", sortable: true},
        {id:"effort-driven", name:"Effort Driven", field:"effortDriven", sortable: true}
        ];

        var options = {
            enableCellNavigation: true,
            enableColumnReorder: false
        };

        $(function() {
            var data = [];
            for (var i = 0; i < 500; i++) {
                data[i] = {
                    id: i,
                    title: "Task " + i,
                    duration: "5 days",
                    percentComplete: Math.round(Math.random() * 100),
                    start: "01/01/2009",
                    finish: "01/05/2009",
                    effortDriven: (i % 5 == 0)
                };
            }

            var dataView = new Slick.Data.DataView();

            grid = new Slick.Grid("#myGrid", dataView, columns, options);
            function comparer(a,b) {
                var x = a[sortcol], y = b[sortcol];
                return (x == y ? 0 : (x > y ? 1 : -1));
            }

            var sortcol = "json_number";
            var sortdir = 1;
            grid.onSort.subscribe(function(e, args) {
                sortdir = args.sortAsc ? 1 : -1;
                sortcol = args.sortCol.field;

                // using native sort with comparer
                // preferred method but can be very slow in IE with huge datasets
                dataView.sort(comparer, args.sortAsc);
            });
            dataView.beginUpdate();
            dataView.setItems(data);
            dataView.endUpdate();
            grid.invalidate();
            grid.render();

            $("#myGrid").show();
        })

Answer 1

尝试添加这个监听器，当行被打乱时重新渲染网格：

dataView.onRowsChanged.subscribe(function(e,args) {
    grid.invalidateRows(args.rows);
    grid.render();
});

此处为原始示例：http://mleibman.github.com/SlickGrid/examples/example4-model.html

Answer 2

尽管已经有一个公认的答案肯定解决了最初的问题，但我想指出在处理 Slickgrid 的 subscribe 方法时 stackoverflow 上的一个常见错误。

让我们想象我们的网格位于名为“grid”的变量中，就像在大多数其他示例中一样。 这发生在大多数接受和/或赞成的答案中：

dataView.onRowsChanged.subscribe(function(e,args) {
    grid.invalidateRows(args.rows);
    grid.render();
});

或

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

      data.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()
      grid.render()
 })

这些示例是否按预期工作？是的，他们确实......在某些情况下。

让我们想象一个将 Slickgrid 添加到 Slickgrids 列表中的函数：

var m_grids = []
function anyName(){
    var grid;
    //..run code
    //..run subscribe
    m_grids.push(grid)
}

那么当我们试图调用任何订阅函数，而订阅函数包含变量网格时会发生什么？它只会影响最后分配的网格，无论订阅是在哪个网格上执行的。 订阅这些函数的正确方法是通过 args 参数：

dataView.onRowsChanged.subscribe(function(e,args) {
    args.grid.invalidateRows(args.rows);
    args.grid.render();
});

或

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

      args.grid.getData().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;
      })

      args.grid.invalidate()
      args.grid.render()
 })

这可能是一个小案例，因为它通常需要在同一页面上使用多个 Slickgrid，但是当我们可以很容易地纠正它时为什么会出错:)