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虛擬滾動方法？

回答

相關問題