dojox.grid.datagrid を作成し、ページの最後の例のように配列からコンテンツを入力します。その間、コードでその配列の値を変更します。そのグリッドのコンテンツを更新する方法は? 変更された配列から新しいデータをロードする方法は?
6 に答える
グリッドの値を変更するには、グリッドのストアの値を変更する必要があります。グリッドデータはストアデータにバインドされ、グリッドは必要に応じて自動的に更新されます。
したがって、重要なのは、DojoのデータAPIと、Dojoでストアがどのように機能するかを理解することです。グリッドでデータを直接操作するのではなく、ストアでデータを操作します。
理想的には、ストアはアプリケーションの実行時に操作する配列であり、配列をグリッドに同期する必要はありません。それが不可能でない限り、ItemFileWriteStoreをデータホルダーとして使用してください。
また、dojoデータID apiを使用すると、可能であればグリッド内のアイテムを簡単に見つけることができます。アプリケーションでアイテムがいつ更新、削除、または変更されたかを知っていると仮定すると、アクションが発生したときに必要に応じてグリッドストアを変更できるはずです。これは間違いなく好ましいアプローチです。それができない場合は、一般的なフェッチを実行し、onCompleteコールバックを使用して配列を手動で同期する必要があります。これは非常に遅く、拡張性が高くありません。その場合は、すべて新しいストアを作成することもできます。一緒に、grid.setStore(myNewStore)を使用してグリッドに割り当てます
基本的な作成、更新、および削除操作のフィドルは次のとおりです。http: //jsfiddle.net/BC7yT/11/
これらの例はすべて、ストアを作成するときにIDを宣言することを利用しています。
var store = new dojo.data.ItemFileWriteStore({
data: {
identifier : 'planet',
items: itemList
}
});
既存のアイテムを更新します:
//If the store is not in your scope you can get it from the grid
var store = grid.store;
//fetchItemByIdentity would be faster here, but this uses query just to show
//it is also possible
store.fetch({query : {planet : 'Zoron'},
onItem : function (item ) {
var humans = store.getValue(item, 'humanPop');
humans += 200;
store.setValue(item, 'humanPop', humans);
}
});
新しいアイテムを挿入します:
store.newItem({planet: 'Endron', humanPop : 40000, alienPop : 9000});
} catch (e) {
//An item with the same identity already exists
}
アイテムを削除する:
store.fetchItemByIdentity({ 'identity' : 'Gaxula', onItem : function (item ) {
if(item == null) {
//Item does not exist
} else {
store.deleteItem(item);
}
}});
次のコード スニペットを使用して、グリッドを更新できます。
var newStore = new dojo.data.ItemFileReadStore({data: {... some new data ...});
var grid = dijit.byId("gridId");
grid.setStore(newStore);
編集:
Dogo データ グリッド リファレンス ガイド(行の追加/削除の例、グリッド データの更新の例)
(すでに作業中のグリッドがあり、グリッドのストアを完全に変更したいとします)
新しい値で新しいデータストアを作成します:
dataStore = new ObjectStore({ objectStore:new Memory({ data: data.items }) });
(データは、私にとっては ajax リクエストからの応答です)
グリッドのストアを新しいものに変更します:
grid.store = dataStore;
与える :
grid.render();
これにより、最新バージョンの Dojo 1.9 でグリッド ストアが更新され、グリッドのビューが更新されます。
grid.store = store;
grid._refresh();
サーバー側でフィルター処理された EnhancedGrid がありました。これは、ストアを変更することで楽しく更新され、他の回答に示されています。
ただし、フィルターが適用されたときに更新されない別の EnhancedGrid がありました。クライアント側でフィルタリングされたという事実に関係している可能性があります(ただし、データはまだ JsonRest ストアを使用してサーバーから送信されています)が、原因はよくわかりません。いずれにせよ、解決策は次のコードで更新することでした:
grid.setFilter(grid.getFilter());
ハックで奇妙ですが、他のすべてが失敗した場合...
これで、特定の行を更新できます。この例はツリーグリッド用です。
var idx = this.treeGrid.getItemIndex(item);
if(typeof idx == "string"){
this.treeGrid.updateRow(idx.split('/')[0]);
}else if(idx > -1){
this.treeGrid.updateRow(idx);
}