javascript - Dojo DataGrid 虚拟滚动操作方法？

Question

我已经为此进行了相当多的挖掘。我正在使用 dojox.grid.datagrid，并且我有一个 ajax 调用，该调用返回 200-300 行。

网格在 Chrome 中渲染和滚动效果很好，但在 IE 7 和 8 中滚动速度非常慢。我想使用虚拟滚动来尝试解决该问题，但找不到任何示例代码。

这是我目前的代码。

function setupAvailableScenes(location) {
var avaiableScenesGridPane = dijit.byId("AvaiableScenesGridPane");
var availableScenesGrid = dijit.byId("AvailableScenesGrid");
if (_isFirstLoad) {

    availableScenesGrid = new dojox.grid.DataGrid({
        id: 'AvailableScenesGrid',
        store: availableScenesStore,
        query: { Id: "*" },
        sortInfo: "1",
        rowsPerPage: 20,
        autoHeight:20,
        style: "width:315px",
        structure: [
                { name: "Available Scenes", field: "Name", width: "85%" },
                {   name: " ",
                    field: "_item",
                    rowsPerPage: "25",
                    type: dojox.grid.cells._Widget,
                    editable: false,
                    width: "15%",
                    formatter: function (scene) {
                        return new dijit.form.Button(
                        {
                            label: "+",
                            onClick: function () {
                                AddSceneToSelectedScenes(scene);
                            }
                        })
                    }
                }
            ]
    });

    avaiableScenesGridPane.set('content', availableScenesGrid);
}

var availableScenesStore = new dojo.data.ItemFileWriteStore({
    url: _applicationPath + "/Location/" + location.Id + "/Scene.json",
    preventUrlCache: true
});

availableScenesGrid.setStore(availableScenesStore);

}

Answer 1

通常，为了提高 DataGrid 性能，您可以做的最重要的事情之一就是放弃 ItemFileReadStore/WriteStore 并使用优化的数据存储(我个人喜欢 QueryReadStore)。这意味着需要某种类型的服务器端 servlet(PHP/JSP/等)来处理虚拟滚动/分页，但我已经看到，与仅使用由 JSON 文件支持的存储相比，性能得到了重大提升。

需要考虑的其他一些事项，可能有帮助，也可能没有帮助:

• 为您的匿名格式化程序函数命名，然后尝试在打开 Chrome 或 Firebug 配置文件的情况下滚动表格，看看它是否占用了大量周期(或者，就像 Vijay Agrawal 所说，您可以尝试替换 dijit.form.Button带有普通 html <button> 标签)
• 您实际上不需要指定 dojox.grid.cells._Widget键入该单元格；有一个返回有效 Dijit 的自定义格式化程序应该足以使 Grid 做正确的事情。