最近经常碰到这样一种情况,事先并不知道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字符串,一切都很简单,万变不离其宗!