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了。
           

        }

你可能感兴趣的:(ext可编辑表格批量提交)