【Ext】EditorGrid绑定后台数据
很久没有更新了……
在使用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数据跟后台的动态绑定就记录完毕了。上一张效果图:
上一篇: 【一统江湖的大前端(8)】matter.js 经典物理
下一篇: JavaScript中的 ===
推荐阅读
-
jsp中将后台传递过来的json格式的list数据绑定到下拉菜单select
-
BootStrap Table 后台数据绑定、特殊列处理、排序功能
-
jsp中将后台传递过来的json格式的list数据绑定到下拉菜单select
-
Jquery加载时从后台读取数据绑定到dropdownList实例
-
BootStrap selectpicker后台动态绑定数据的方法
-
【WPF】后台数据绑定
-
ext combobox动态加载数据库数据(附前后台)
-
AJAX 动态加载后台数据 绑定select的方法
-
AJAX 动态加载后台数据 绑定select
-
BootStrap Table 后台数据绑定、特殊列处理、排序功能