最近经常碰到这样一种情况,事先并不知道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字符串,一切都很简单,万变不离其宗!
分享到:
相关推荐
Extjs动态Grid的生成 htm
ASP.NET结合EXTJS动态生成Grid列表的例子程序源码
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
内容索引:.NET源码,Ajax相关,EXTjs 结合EXTJS类库动态生成Grid数据列表的演示,如果你没有配置数据库信息,那么程序运行时会自动弹出数据安装窗口,安装完成就可以查看演示了,基于EXT风格的Ajax数据列表,简洁实用...
本人亲测在 ExtJs4.2 上可用,有两种实现导出Excel的 方法,资源内附简单的使用说明。因本人没多少资源分了,所以万不得已设置 资源分为 2 分。
解决了一个表格不能重复下载的小BUG,一个使用grid初始化发生的BUG 下面记录一下步骤。说不定下次还有用 1.下载需要用到js代码,我已经上传 2.在你的html文件中加入引用,路径问题自己 注意下,下面是我的路径 代码...
需要做一个控制grid列显示的checkboxgroup,虽然EXTJS4中的gridpanel自带列表可以来控制列的显示隐藏,需要的朋友可以参考下
extjs4如何自动生成掌握grid的列显示、隐蔽的checkbox_.docx
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示多行数据,推拽改变...
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变...
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变...
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽...
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变...
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变...
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽...
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变...
自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能。 再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变...