动态操作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();

},

 

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

 

转载于:https://www.cnblogs.com/lfsfxy9/archive/2012/02/28/2629230.html