读书人

ext可编辑表格批量交付

发布时间: 2012-09-20 09:36:50 作者: rapoo

ext可编辑表格批量提交

此文只针对可编辑表格如何收集数据提交并在后台处理,至于可编辑表格在前端的实现可以参考网上的其他文章,很多的。

如你的Record创建是这样的:

var product_record = Ext.data.Record.create([

..........

?]);

你在下面的grid中添加

var grid_adjtdtl = new Ext.grid.EditorGridPanel({
????title:"",
????id:"adjtdtlgrid",
??? stripeRows:true, //相邻两行背景色不同
????tbar:new Ext.Toolbar(['-',{
??????text:'添加',
??????handler:function() {
???????var p = new product_record ({

????????subSeq:'1',
????????dbCr:'1',
????????currAcc:'1',
????????job:'1',
????????jobDtl:'1',
????????accObjt:'1',
????????txAmt:'1',
????????accFlag:'1',
????????remark:'1'
???????});
?????? grid_adjtdtl.stopEditing();
???????storeAdjtdtl.insert(storeAdjtdtl.getCount(),p);
?????? grid_adjtdtl.startEditing(0,0);
???????
??????}
?????}

上边的估计大家都会,此处不细说。

当你每次点击Toolbar中添加按钮时会增加一条可编辑的表格,也就是允许同事添加多个然后一起提交。

重点一:页面数据的整理

????? var m = storeAdjtdtl.modified.slice(0);//返回从0行开始的所有编辑过的记录组成的数组。
????? var jsonArray = [];
??????Ext.each(m,function(item){jsonArray.push(item.data);});
??????var resultArr= Ext.encode(jsonArray);

????? 我们只需将resultArr作为ajax提交的参数即可,ext的ajax提交非常简单,此处略。

????

重点二:后台接收

?? JSONArray arr = JSONArray.fromObject(resultArr);//resultArr是前台传过来的参数
???Object[] o = arr.toArray();

????

?? for (Object obj : o) {
????? JSONObject json = (JSONObject) obj;
????? DtlVO????dtlVO = (DtlVO) JSONObject.toBean(json,AccAdjtDtlVO.class);//将前台传过来的数据循环转化正对象,获取对象后就可以就可以以对象的形式来保存了,接下来的处理就so easy了。
???????????

????????}

读书人网 >Web前端

热点推荐