在web顯示數據時，會遇到grid的列數和行數不確定的這種情況。如何來根據數據動態的創建表格呢？ Extjs 的json data給我們帶來了一個很好的比較簡單的方法。 要創建一個grid需要確定它的列數，再根據數據的數量就可以確定行數了。 看到有人用過一種方法就是講列的屬性和數據一起放在json data里去，這樣可以達到效果，但是不難發現，這樣的話，就很難進行分頁或者更新表格里的數據。 其實我們可以結合extjs官網上的那種固定列數的訪問方法來動態生成表格。 首先通過Ajax從服務端反回列的信息，封裝成json ,表格數據通過另一個ajax請求來獲得，因為列已經獲得，所以可以將此封裝成一個store.這樣大功告成，生成grid所需要的，store,和cm demo 源碼如下：(由于考慮到代碼簡介明了，我將數據寫死在了js 中)： Ext.onReady(function(){ // NOTE: This is an example showing simple state management. During development, // it is generally best to disable state management as dynamically-generated ids // can change across page loads, leading to unpredictable results. The developer // should ensure that stable state ids are set for stateful components in real apps. Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); var myData =[[1,1,1,1], [2,2,2,2] ]; // example of custom renderer function function change(val){ if(val > 0){ return '' + val + ''; }else if(val < 0){ return '' + val + ''; } return val; } // example of custom renderer function function pctChange(val){ if(val > 0){ return '' + val + '%'; }else if(val < 0){ return '' + val + '%'; } return val; } // create the data store var fieldDatas = "{'columModle':["+ "{'header': 'seq','dataIndex': 'number','width':40},"+ "{'header': 'code','dataIndex': 'text1'},"+ "{'header': 'name','dataIndex': 'info1'},"+ "{'header': 'price','dataIndex': 'special1'}"+ "],'fieldsNames':[{name: 'number'},"+ "{name: 'text1'}, {name: 'info1'},"+ "{name: 'special1'}]}"; var json = new Ext.util.JSON.decode(fieldDatas); var cm = new Ext.grid.ColumnModel(json.columModle); var store = new Ext.data.SimpleStore({ fields: json.fieldsNames }); store.loadData(myData); // var ds = new Ext.data.JsonStore({ // data:store.toSource(), // fields:json.fieldsNames // }); // create the Grid var grid = new Ext.grid.GridPanel({ height:200, width:400, region: 'center', split: true, border:false, store:store, cm:cm }); grid.render('grid-example'); });

總結

以上是生活随笔為你收集整理的Extjs 动态生成表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。