此文只针对可编辑表格如何收集数据提交并在后台处理,至于可编辑表格在前端的实现可以参考网上的其他文章,很多的。
如你的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了。
}