ExtJs动态grid的生成
最近经常碰到这样一种情况，事先并不知道grid中每一列的信息，也就是不知道 grid 的ColumnModel中的相信信息，需要经过后台才能获取所有列的信息，此时就需要用到grid列的动态生成。目前只研究了两种方式的动态grid生成方法，下面附上方法。
第一种方法：
需要导入一个插件，AutoGrid.js，在网上都可以下载到，附件也上传了。
前台代码如下
var grid = new Ext.ux.AutoGridPanel({ title:'动态grid', renderTo: 'w', height: 300, width: 1200, loadMask: true, store : new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:"../ReceivableAccountServlet"}), reader: new Ext.data.JsonReader() })});grid.store.load({params: {meta: true}});
后台返回的JSON字符串格式如下
{"metaData":{"root":"rows","id":0,"fields":[{"name":"employee_id","header":"雇员ID"},{"name":"employee_name","header":"姓名"},{"name":"receivable_month","header":"应收年月"},{"name":"name0","header":"产品1"},{"name":"name1","header":"产品2"},{"name":"name2","header":"产品3"}]},"rows":[{"employee_id":3,"employee_name":"张三","receivable_month":201010,"name0":33,"name1":11,"name2":22}]}
第一种方法只能做动态grid的显示操作，并不能对Gird进行编辑保存等操作。下面介绍第二种方法
还是先贴前台代码吧
Ext.onReady(function(){Ext.Ajax.request({ url:"../ReceivableAccountServlet", params:{bill_version_id:bill_version_id}, success:function(response,config){ json=Ext.util.JSON.decode(response.responseText); var cm = new Ext.grid.ColumnModel(json.columModel);var store = new Ext.data.JsonStore({data:json.data,fields:json.fieldsNames}); var grid = new Ext.grid.EditorGridPanel({ title:'账单明细', region: 'center', split: true, renderTo: 'w', height: 300, width: 1200, cm:cm, store:store }); }, failure:function(){ }});});
后台传回的JSON字符串如下
{'action':true,'message':'error!','data':[{'number':'1','text1': '3','info1': '4','special1': '5'}],'columModle':[{'header': '序号','dataIndex': 'number','width':40},{'header': '编码','dataIndex': 'text1',editor:new Ext.grid.GridEditor(new Ext.form.NumberField())},{'header': '名称','dataIndex': 'info1'},{'header': '金额','dataIndex': 'special1'}],'fieldsNames':[{name:'number'},{name:'text1'},{name:'info1'},{name:'special1'}]}
此种方法是我最喜欢用的，功能强大。。。
其实不管你是哪一种grid,最重要的还是数据的对应关系。只要明确如何去解析JSON字符串，一切都很简单，万变不离其宗！
页:
[1]