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

由于您指定 rowsPerPage=25，它已经在进行虚拟滚动（仅当用户向下滚动时它才会拉出新的行集）

由于您提到滚动非常慢，因此性能问题似乎与渲染新行有关 - 您可以尝试一些方法来提高性能： 1) 移除 autoHeight 属性。而是在样式属性中指定固定高度 2) 在格式化程序函数中，尝试返回一个简单的 html 按钮/锚点，而不是返回 dijit，样式为按钮 所以删除 type:dojox.grid.cells._Widget 属性并在格式函数中返回您要使用的 html

Answer 2

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

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

• 为您的匿名格式化程序函数命名并尝试在打开 Chrome 或 Firebug 配置文件的情况下滚动表格以查看它是否占用了很多周期（或者，如 Vijay Agrawal 所说，您可以尝试替换 dijit.form.Button带有香草 html <button> 标签）
• 您实际上不需要为该单元格指定dojox.grid.cells._Widget 类型；拥有一个返回有效 Dijit 的自定义格式化程序应该足以让 Grid 做正确的事情。