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

【问题标题】：SlickGrid w/ DataView not immediately reflecting changes in underlying data带有 DataView 的 SlickGrid 不会立即反映基础数据的变化
【发布时间】：2015-03-21 00:08:02
【问题描述】：

我有以下使用 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，因为我想允许排序以及以后不同类型的聚合和分组。

这可能与使用 slickgrid 和敲除 js 有关吗？

非常感谢

【问题讨论】：

您在哪里使用 KnockoutJS？您可能需要更新您的问题以包含对问题的完整但最少的重现（最好在可运行的堆栈片段中），没有它我们只能猜测问题。
我已经能够排除 knockoutjs 是一个问题。通过在我的更新中删除上述订阅，我能够使用 slickgrid 独立示例进行复制

标签： javascript knockout.js slickgrid

【解决方案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();
});

【讨论】：