Question

我有以下使用slickgrid.js构建网格的代码。

var grid;
var gridDataview;
var gridOptions = {
    enableCellNavigation: true,
    enableColumnReorder: true,
    forceFitColumns: false,
    topPanelHeight: 25
};

function createGrid(data) {
    gridDataview = new Slick.Data.DataView({ inlineFilters: true });
    grid = new Slick.Grid("#grid", gridDataview, data.columns, gridOptions);
    grid.setSelectionModel(new Slick.RowSelectionModel());
    var pager = new Slick.Controls.Pager(gridDataview, grid, $("#pager"));
    var columnpicker = new Slick.Controls.ColumnPicker(data.columns, grid, gridOptions);
    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
        gridDataview.sort(comparer, args.sortAsc);
    });

    // if you don't want the items that are not visible (due to being filtered out
    // or being on a different page) to stay selected, pass 'false' to the second arg
    gridDataview.syncGridSelection(grid, true);
    $("#gridContainer").resizable();
}

我在knockout-js中使用它，并且最初只在用户从列表框中进行选择后才创建网格，此时我从休息服务获取数据并构建网格。每个后续用户选择都不会创建网格，只会更新数据。

    self.selectedInstrument.subscribe(function (newValue) {
    $.getJSON('/data/' + self.selectedCategory().id + '/' + newValue.id, function (data) {
        self.cotData(data);
        if (grid == null) {
            debugger;
            createGrid(data);
        }
        //gridDataview.beginUpdate();
        gridDataview.setItems(data.data);
        //gridDataview.endUpdate();
    });
});

发生的事情是： 1.最初创建网格时，不会显示任何数据，只显示列标题。如果我移动重新排序列标题，则显示数据。 2.如果我对列进行排序，则不会明显反映排序。如果我开始滚动，那么我看到正在反映的那种。 3.如果我将grid.render（）添加到上面的订阅处理程序的末尾，我确实立即看到数据，但是我不能再垂直滚动。在这一点上，事情似乎严重受损。

有关这里可能发生的事情的任何想法？在我修改代码以创建DataView而不是立即将数据直接加载到网格中之后，这种情况就开始发生了。我需要一个DataView，因为我想允许排序以及后来不同类型的聚合和分组。

这可能与使用敲击js的slickgrid有关吗？

非常感谢

Answer 1

不知道为什么，因为我仍然在SlickGrid周围，但我不得不添加以下两个订阅。第一个允许网格在加载新数据时立即显示行，第二个解决了类似的问题，但在排序时：

// wire up model events to drive the grid
gridDataview.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
});
gridDataview.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
});

带有DataView的SlickGrid不会立即反映基础数据的变化

1 个答案: