很久没有更新了……
在使用Ext JS作为前端开发框架时,避免了写原生态table之类的元素。现在有一需求是写可编辑单元格的表格,并且需要和后台数据动态绑定起来。下面就简单记录下过程,以便日后供自己和需要的同行参考~
前端部分(核心):
1)先写一个div容器
<div id="grid"></div>
2)js部分:
Ext.onReady(function(){ var column = new Ext.grid.ColumnModel([ {header:'描述',dataIndex:'memo',width:200, align:'center'}, {header:'时间',dataIndex:'time',width:200, align:'center'}, {header:'满意',align:'center', dataIndex:'satisfied',width:100,editor:new Ext.grid.GridEditor( new Ext.form.TextField({ allowBlank:false }) )}, {header:'一般',align:'center', dataIndex:'general',width:100,editor:new Ext.grid.GridEditor( new Ext.form.TextField({ allowBlank:false }) )}, {header:'不满意',align:'center', dataIndex:'unsatisfied',width:100,editor:new Ext.grid.GridEditor( new Ext.form.TextField({ allowBlank:false }) )}, ]); //这里就是从后台searchGrid方法获取数据的部分,填充到store里。 var store= new Ext.data.JsonStore({ //proxy:new Ext.data.MemoryProxy(data), proxy:new Ext.data.HttpProxy({ //type:'ajax', url:'./setting.do?method=searchGrid' }), fields:['id','memo','time','satisfied','general','unsatisfied'] //这些是要跟后台数据Map的key要一一对应的。 }); store.load(); var grid1=new Ext.grid.EditorGridPanel({ renderTo:"grid", store: store, height:200, clicksToEdit:1, cm:column }); });
//---------------------------------------------------------------------------------------------------------------------------
数据写死的话就是proxy:new Ext.data.MemoryProxy(data),其中data是类似以下这种数据结构:
var data = [
['新客户工作时间', '8:30-17:30', 4, 2, -1],
['新客户非工作时间', '17:30-8:30', 4, 2, -1],
['老客户五星以上工作时间', '8:30-17:30', 4, 2, -1],
['老客户五星以上非工作时间', '17:30-8:30', 4, 2, -1],
['老客户五星以下工作时间', '8:30-17:30', 4, 2, -1],
['老客户五星以下非工作时间', '17:30-8:30', 4, 2, -1]
];
//---------------------------------------------------------------------------------------------------------------------------
后台部分
searchGrid方法获取到的数据是一个List<Map<String, Object>> list结构的数据,而传递给前端的则是一个[{'id':1, 'name':'Lily', 'age':23, 'memo':'sssssssss'}, {'id':2, 'name':'Lily2', 'age':33, 'memo':'sssssssss'}, {'id':3, 'name':'Lily3', 'age':43, 'memo':'sssssssss'}, ...]形式的json, 即json串的数组。
JsonUtils.convertToString(list)
同样,要将EditorGrid表格数据提交给后台也需要提交一个类似结构的json串的数组,获取方式如下:
var data = []; for(var i=0; i<store.getCount(); i++) { var record = store.getAt(i); data.push(record.data); }
注意:一定要转换成后台能够接收到的结构:使用Ext.util.JSON.encode(data)或JSON.stringify(data)将json数组对象转换成字符串。此时后台接收是通过JSONArray来进行的:
JSONArray arr = JSONArray.fromObject(datas); for(int i=0; i<arr.size(); i++) { JSONObject obj = arr.getJSONObject(i); //获取各属性值用obj.get(key), 转换成int或double等数值用Integer.valueOf(obj.get(key).toStirng())或Double.valueOf(obj.get(key).toStirng()) }
至此,Ext的EditorGrid数据跟后台的动态绑定就记录完毕了。上一张效果图:
相关推荐
使用EXT的EditorGrid,实现前台页面对数据直接进行增删改查操作。用户的友好性较好,已经实现分页功能。例子中使用了DWR和JSON.含MySQL数据库脚本,并已加入Log4j日志记录。本例详细讲解可以参见:...
此文档是可编辑表格Ext.grid.EditorGridPanel的说明以及示例的源代码,放到eclipse里面即可运行,显示出效果!
1.2. 看看ext-1.1.1的文档 1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不到图片 1.6. 我们还需要什么? 1.7. 入门之前,都看hello...
1.2. 看看ext-2.0.2的文档 1.3. 为什么有的例子必须放在服务器上才能看到效果? 1.4. 为什么自己按照例子写的代码,显示出来总找不到图片 1.5. 我们还需要什么? 1.6. 入门之前,都看helloworld。 1.6.1. 直接使用...
1.2. 看看ext-1.1.1的文档 1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不到图片 1.6. 我们还需要什么? 1.7. 入门之前,都看...
9.2.2 从后台脚本获得分页数据 9.2.3 在表格顶部显示分页工具条 9.2.4 实现前台分页效果 9.3 可编辑表格控件——EditorGrid 9.3.1 制作第一个EditorGrid 9.3.2 添加一行数据 9.3.3 保存修改结果 9.3.4 验证...
说实话, 我也是特别懒的人, 很早就想看看 Ext, 尤其是做一个实时编辑的带后台的表格例子, 一直没能深入, 今天抽时间深入看了看 Ext 的 EditorGrid,可编辑的表格控件,总算凑出来了个实时增删改的例子(不单独弹出添加...
3.9.2 通过后台脚本获得分页数据 49 3.9.3 分页工具栏显示在Grid的顶部 51 3.9.4 让EXT支持前台排序 52 3.10 后台排序 53 3.11 可编辑表格控件--EditorGrid 55 3.11.1 制作一个简单的EditorGrid 55 3.11.2 ...
当然还有很多地方需要优化,例如实现描述性的列标题(而不是以字段名做为列标题),配置列宽和对齐方式,实现 Dynamic EditorGrid等,通常我们还需要一个配置档,将这些原先硬编码的信息在配置档里配置好,然后在...
9.2.2 从后台脚本获得分页数据 9.2.3 在表格顶部显示分页工具条 9.2.4 实现前台分页效果 9.3 可编辑表格控件——EditorGrid 9.3.1 制作第一个EditorGrid 9.3.2 添加一行数据 9.3.3 保存修改结果 9.3.4 验证...
Tree与EditorGrid结合在一起,树形的展示结构,可以对其中的数据进行编辑,类似RowEditor.
c)扩展高级插件editorgrid(可动态的添加、修改、删除行,对行的单元格进行编辑)(授权用户可用) d)扩展高级插件grid扩展列插件(授权用户可用) EfsFrame主要特点: 基于Ext的优秀企业级开源框架(精通一种、...
c)扩展高级插件editorgrid(可动态的添加、修改、删除行,对行的单元格进行编辑)(授权用户可用) d)扩展高级插件grid扩展列插件(授权用户可用) EfsFrame主要特点: 基于Ext的优秀企业级开源框架(精通一种、...
c)扩展高级插件editorgrid(可动态的添加、修改、删除行,对行的单元格进行编辑)(授权用户可用) d)扩展高级插件grid扩展列插件(授权用户可用) EfsFrame主要特点: 基于Ext的优秀企业级开源框架(精通一种...
c)扩展高级插件editorgrid(可动态的添加、修改、删除行,对行的单元格进行编辑)(授权用户可用) d)扩展高级插件grid扩展列插件(授权用户可用) EfsFrame主要特点: 基于Ext的优秀企业级开源框架(精通一种、...