Dojo DataGrid仮想スクロール・ハウツー？

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

あなたはrowsPerPage = 25を指定しているので、あなたはスクロール言及ので、それはすでに（それは場合にのみ、ユーザーがスクロールダウン行の新しいセットを引っ張る）

を仮想スクロールをやっていることは非常に遅いですパフォーマンスの問題は、新しい行のレンダリングにあるように思えます。パフォーマンスを向上させるためにいくつかのことを試すことがあります。 1）autoHeight属性を削除します。その代わりに、スタイル属性 の固定高さを指定します。2）フォーマッタ関数では、dijitを返す代わりに、単純なhtmlボタン/アンカーをボタン として返すようにしてください。dojox.grid.cells._Widget属性を削除してください。書式関数で使用するhtmlを返します

Answer 2

DataGridのパフォーマンスを向上させるためにできる最大のものの1つは、ItemFileReadStore/WriteStoreを捨て、最適化されたデータストア（個人的に私はQueryReadStoreが好きです）を使用することです。これは、仮想スクロール/ページネーションを処理するために何らかの種類のサーバー側サーブレット（PHP/JSP/etc）を必要とすることを意味しますが、JSONファイルに基づいてストアを使用するだけでは大幅なパフォーマンス向上は見られませんでした。

か助けていない場合があり、考慮すべきいくつかの他のもの、：

• はあなたの匿名のフォーマッタ機能に名前を付け、クロムまたはFirebugのプロファイルを持つテーブルをスクロールしてみてください、それは多くを占有だかどうかを確認するためにオン（または、Vijay Agrawalさんのように、dijit.form.Buttonをバニラのhtml <button>タグに置き換えてみてください）
• 実際にはそのセルにdojox.grid.cells._Widgetタイプを指定する必要はありません。有効なDijitを返すカスタムフォーマッタを持つことは、Gridが適切なことをするのに十分であるはずです。