Dojo DataGrid虚拟滚动方法？

我一直在挖掘这个相当多的。我使用的是dojox.grid.datagrid，并且我有一个可以返回200-300行的ajax调用。Dojo DataGrid虚拟滚动方法？

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);

}

来源

2012-03-13 Ali

既然你指定rowsPerPage = 25，它已经在做虚拟滚动（它拉一组新的行，只有当用户向下滚动）

既然你提到滚动很慢性能问题似乎围绕着渲染新行 - 您可能会尝试几件事情来提高性能： 1）删除autoHeight属性。相反，指定在格式化功能的样式属性 2）一个固定的高度，而不是返回的dijit，试图返回风格的按钮一个简单的HTML按钮/锚所以删除类型：dojox.grid.cells._Widget属性，在格式函数中返回你想要使用的html

来源

2012-03-13 16:01:21

感谢您的关注。我知道它应该做虚拟滚动，但我没有看到头部中发送的参数。我假设startrow和要返回的行数是参数，我将不得不发送到我的控制器，然后在我的数据层中处理以返回行数。我会看看如果一个简单的按钮将在dijit中执行。让我知道你对虚拟滚动的看法。 – Ali 2012-03-13 16:16:11

恩 - 请你澄清一下吗？你期望哪些标题被发送？你指的是延迟加载还是虚拟滚动？ – 2012-03-13 16:17:52

虚拟滚动。基本上，我希望网格一次加载25-50行。 – Ali 2012-03-13 16:26:32

通常你可以通过改变DataGrid性能来做最大的事情之一就是扔掉ItemFileReadStore/WriteStore并使用优化的数据存储（我个人喜欢QueryReadStore）。这意味着需要某种类型的服务器端servlet（PHP/JSP/etc）来处理虚拟滚动/分页，但是我已经看到了只使用由JSON文件支持的存储的主要性能提升。

其他需要考虑的因素，这可能会或可能不会帮助：

给您的匿名格式化函数的名称，并尝试用浏览器或Firebug的轮廓滚动表打开，看看它是否占用大量（或者像Vijay Agrawal说的，你可以尝试用香草html <button>标签代替dijit.form.Button）
你实际上不需要指定该单元格的dojox.grid.cells._Widget类型;有一个自定义的格式化程序返回一个有效的Dijit应该足以让Grid做正确的事情。

来源

2012-03-13 18:29:43

Ryan，非常感谢您在Google +上回复我并在此处写回复。我想使用一个读取存储，但我需要更新网格，因此我认为我需要粘贴写入存储（纠正我，如果我错了）。我翻阅了您在网站上发布的示例代码，未来我会牢记它。我想知道，如果我使用JsonStore，如果网格将保持可编辑。即我可以编辑网格，然后通过ajax调用发回。或者我需要一个写入存储来编辑网格。我想我会这样做，但是我想错了;） – Ali 2012-03-14 00:51:14

JsonRest商店应该允许您保留更改。有关Dojo网站的教程介绍了如何执行此操作：http://dojotoolkit.org/documentation/tutorials/1.6/store_driven_grid/ – 2012-03-14 02:21:20

Dojo DataGrid虚拟滚动方法？

回答

相关问题