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

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. 最初创建网格时，不显示任何数据，仅显示列 headers。如果我移动 re-order 列 header，则会显示数据。 2. 如果我对一列进行排序，排序不会明显反映出来。如果我开始滚动，那么我会看到正在反映的排序。 3. 如果我将 grid.render() 添加到上面订阅处理程序的末尾，我确实会立即看到数据，但我无法再垂直滚动。在这一点上，事情似乎严重崩溃了。

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

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

非常感谢

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 不会立即反映基础数据的变化

SlickGrid w/ DataView not immediately reflecting changes in underlying data

javascript

knockout.js

slickgrid