動態操作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();

},

 

        總結一下,以上兩種實現方式的根本都是一致的,都是在原數據源的基礎上去操作數據源,只不過后者邏輯更復雜一些,頁面的可操作性更強。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM