动态操作Dojo下的DataGrid

从同事那里接手一个模块，其中需要给DataGrid动态增加数据，这里有两种方法可以实现功能，第一种最简单，也就是使用ItemFileWriteStore,它和ItemFileReadStore最大的一个不同之处，就在于前者store数据源是可编辑的，而后者则是只读。如此来说，我们若要在页面上动态修改数据而不与后台通信，则用此正合适。@H_404_2@

@H_404_2@

如下：@H_404_2@

var _data = {@H_404_2@

identifier : 'id',@H_404_2@

items : _items //JSON格式的数据源@H_404_2@

};@H_404_2@

@H_404_2@

this.store = new dojo.data.ItemFileWriteStore({@H_404_2@

data : _data@H_404_2@

});@H_404_2@

@H_404_2@

this.dataGrid.setStore(this.store);@H_404_2@

@H_404_2@

第二种方式要麻烦很多，并且页面操作也多了不少。页面需要在DataGrid的每个cell中加入特定的元素控件，不是单纯的增加数据项。其实思路很简单，和上面的方法共同。@H_404_2@

如下：@H_404_2@

1.首先确定Grid的样式，在特定cell中插入元素，并且可以设置editable以供修改。@H_404_2@

var layout = [ {@H_404_2@

type : "dojox.grid._CheckBoxSelector"@H_404_2@

},{@H_404_2@

cells : [ [ {@H_404_2@

field: "displayName",@H_404_2@

type : dojox.grid.cells.Select,@H_404_2@

options: ["短期","长期","永久"],@H_404_2@

editable: true,@H_404_2@

width : "15%"@H_404_2@

},{@H_404_2@

field: "interval",@H_404_2@

width: "8%",@H_404_2@

editable: true@H_404_2@

},{@H_404_2@

field: "unit",@H_404_2@

width: "5%"@H_404_2@

} ] ]@H_404_2@

} ];@H_404_2@

this.defaultGrid.setStructure(layout);@H_404_2@

@H_404_2@

2.将this.dataGridStore 和DataGrid的数据源store进行绑定，二者之间是属于址传递的关系。所以，操作a，b也会变化。@H_404_2@

_buildWriteStore : function(items) {@H_404_2@

var store = new dojo.data.ItemFileWriteStore({@H_404_2@

data : {@H_404_2@

id : "id",@H_404_2@

label : "codeName",@H_404_2@

items : items@H_404_2@

}@H_404_2@

});@H_404_2@

this.defaultGrid.setStore(store);@H_404_2@

return store;@H_404_2@

},@H_404_2@

@H_404_2@

3.生成实例化数据项，绑定到defaultGrid的store上就ok 。@H_404_2@

addRowData: function(){@H_404_2@

@H_404_2@

var item = {@H_404_2@

"retentionPeriod": "短期",@H_404_2@

"cycle": "1",@H_404_2@

"unit" : "年"@H_404_2@

};@H_404_2@

this.dataGridStore.newItem(item);@H_404_2@

this.dataGridStore.save();@H_404_2@

},@H_404_2@

@H_404_2@

总结一下，以上两种实现方式的根本都是一致的，都是在原数据源的基础上去操作数据源，只不过后者逻辑更复杂一些，页面的可操作性更强。@H_404_2@

动态操作Dojo下的DataGrid

猜你在找的Dojo相关文章