從同事那里接手一個模塊,其中需要給DataGrid動態增加數據,這里有兩種方法可以實現功能,第一種最簡單,也就是使用ItemFileWriteStore,它和ItemFileReadStore最大的一個不同之處,就在於前者store數據源是可編輯的,而后者則是只讀。如此來說,我們若要在頁面上動態修改數據而不與后台通信,則用此正合適。
如下:
var _data = {
identifier : 'id',
items : _items //JSON格式的數據源
};
this.store = new dojo.data.ItemFileWriteStore({
data : _data
});
this.dataGrid.setStore(this.store);
第二種方式要麻煩很多,並且頁面操作也多了不少。頁面需要在DataGrid的每個cell中加入特定的元素控件,不是單純的增加數據項。其實思路很簡單,和上面的方法共同。
如下:
1.首先確定Grid的樣式,在特定cell中插入元素,並且可以設置editable以供修改。
var layout = [ {
type : "dojox.grid._CheckBoxSelector"
},{
cells : [ [ {
name: this.resourceBundle.retentionPeriod,
field: "displayName",
type : dojox.grid.cells.Select,
options: ["短期", "長期", "永久"],
editable: true,
width : "15%"
}, {
name: this.resourceBundle.cycle,
field: "interval",
width: "8%",
editable: true
}, {
name: this.resourceBundle.unit,
field: "unit",
width: "5%"
} ] ]
} ];
this.defaultGrid.setStructure(layout);
2.將this.dataGridStore 和DataGrid的數據源store進行綁定,二者之間是屬於址傳遞的關系。所以,操作a,b也會變化。
_buildWriteStore : function(items) {
var store = new dojo.data.ItemFileWriteStore({
data : {
id : "id",
label : "codeName",
items : items
}
});
this.defaultGrid.setStore(store);
return store;
},
3.生成實例化數據項,綁定到defaultGrid的store上就ok 。
addRowData: function(){
var item = {
"retentionPeriod": "短期",
"cycle": "1",
"unit" : "年"
};
this.dataGridStore.newItem(item);
this.dataGridStore.save();
},
總結一下,以上兩種實現方式的根本都是一致的,都是在原數據源的基礎上去操作數據源,只不過后者邏輯更復雜一些,頁面的可操作性更強。