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的订阅方法时指出stackoverflow上的一个常见错误。

让我们假设我们的网格位于名为＆＃39; grid＆＃39;的变量中，与大多数其他示例一样。这种情况发生在大多数已接受和/或赞成的答案中：

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)
}

那么当我们尝试调用任何订阅函数时会发生什么，而subscribe函数包含变量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，但为什么在我们能够非常轻松地纠正它时会出错：）

简单的Slickgrid排序不起作用

2 个答案: