动态操作Dojo下的DataGrid
从同事那里接手一个模块,其中需要给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(); },
总结一下,以上两种实现方式的根本都是一致的,都是在原数据源的基础上去操作数据源,只不过后者逻辑更复杂一些,页面的可操作性更强。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |