Question

我一直在寻找这个问题。我正在使用dojox.grid.datagrid，我有一个带回200-300行的ajax调用。

网格在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

通常，您可以做的一件事就是抛弃ItemFileReadStore / WriteStore并使用优化的数据存储（我个人喜欢QueryReadStore）。这意味着需要某种服务器端的servlet（PHP / JSP / etc）来处理虚拟滚动/分页，但我已经看到仅仅使用由JSON文件支持的商店的主要性能提升。

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

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

Answer 2

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

由于你提到滚动非常慢，性能问题似乎是在呈现新行 - 你可以尝试一些方法来提高性能： 1）删除autoHeight属性。而是在style属性中指定固定高度 2）在formatter函数中，尝试返回一个简单的html按钮/锚点作为按钮，而不是返回一个dijit 所以删除类型：dojox.grid.cells._Widget属性，并在格式函数中返回你要使用的html

Dojo DataGrid虚拟滚动方法？

2 个答案: