2048
官方抖音号:“前端gogogo”,大家一起来交流前端经验和技术啊,一起来吹吹水啦
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

记录手动处理form表单中对table表格中的行数据的收集

jqueryform表单table行数据收集list数据解析作者:猿2048志愿者
通过ajax发送数据到controller来处理,这是大部分web应用都会遇到的问题。而对于form表单数据的收集,如果要发送数据少的话,我们可以一个一个来收集,而如果有很多也就是说批量操作那么我们可以通过
$("#FormId").serializeArray();来自动发送数据,而对于要收集的对象属性名都是相同的,而在controller层的注解通过普通的
@RequestMapping()来完成即可。
例如Object 有属性A,B,C,D.则在form表单中存在
对应的三行数据各自都对应了不同的值。
A1,B1,C1,D1
A2,B2,C2,D2
A3,B3,C3,D3
那么在contoller参数接收通过Object obj来自动收集。最终会以一个对象的形式呈现。
A=A1,A2,A3
B=B1,B2,B3
C=C1,C2,C3
D=D1,D2,D3
然后我们通过拆分每一个属性中的值集合分别来处理多个数据。
上述的处理方式只适合与每一个属性都要么都有值,要么都没有值。而如果其中有一行数据中部分属性可以为空,我们可以通过设置默认值来完成。
但是如果没有默认值允许设置,则无法处理了。
这个时候我们也许需要单独去处理每一行数据来构造json对象,最后以数组形式发送给controller,这个时候controller需要通过List<Object> list
的形式来收集数据集合:
具体的data形式为从表中获取所有需要提交的数据行:
var trList= $("#tableId").find("tr");
           var objs=[];
           for(var i=4;i<trList.length;i++) {
               if($(trList[i]).find("input[name='isSelect']").attr("checked")=='checked'){ //只处理选中的行数据


                   var isTrue=0;
                   var codes=[];
                   var bgType="";
                   var fcode="";
                   var ss = "";
                   var codelist=$(trList[i]).find("td:eq(3)").children();
                   for(var j=0;j<codelist.length;j++){
                       var codeId=!$(codelist[j]).attr('id')?'0':$(codelist[j]).attr('id');
                       if(codeId.length>=4){
                           var bgCode=new Object();
                           bgCode.fcode=$(codelist[j]).find("select[name='fcode']").val();
                           bgCode.bgType=$("#u"+codeId).find("select[name='bgType']").val();
                           bgCode.scode='';
                           bgCode.tcode='';
                           if(bgCode.fcode.charAt(0)=='B') {
            bgCode.ss=1;
                           }
                           if(bgCode.fcode.charAt(0)=='G') {
                               bgCode.ss=2;
                           }
                           codes.push(bgCode);
                           bgType=bgType+bgCode.bgType+"#";
                           fcode=fcode+bgCode.fcode+"#";
                           ss=ss+bgCode.ss+"#";
                           isTrue=1
                       }
                   }
                   if(isTrue==0){
                       $.messager.alert("操作提示", "关键字信息填写不完整,请补充","error");
                       return
                   }
                   var obj=new Object();
                   obj.caseId=$("#caseId").val();
                   obj.id=$("#id1").val();
                   obj.cid=$("#cid1").val();
                   var core=new Object();
                    core.bgValueType=$(trList[i]).find("input[name='bType']").val().charAt(0);
                    core.bgValue=$(trList[i]).find("input[name='bgValue']").val();
                    core.isMan=$(trList[i]).find("input[name='isMan']").val();
                    core.custName=$("#custName1").val();
                    core.id=$("#id1").val();
                    core.bgType=bgType.substring(0,bgType.length-1);
                    core.fcode=fcode.substring(0,fcode.length-1);
                    core.ss=ss.substring(0,ss.length-1);
                    obj.core=core;


                    var record=new Object();
                    record.isMan = $(trList[i]).find("input[name='isMan']").val();
                    record.bType=$(trList[i]).find("input[name='bType']").val();
                    record.custName=$("#custName1").val();
                    record.id=$("#id1").val();
                    obj.record=record;
                    obj.codes=codes;
                   
                     objs.push(obj);
               }


           }
           if(objs.length==0) {
               $.messager.alert("操作提示", "没有要提交的信息,请选择","error");
               return
           }
       
           $.ajax( {
              type : 'POST',
              url : "${ctx}/path",
              data:JSON.stringify(objs),
dataType:"json",
               headers : {
                   'Accept' : 'application/json',
                   'Content-Type' : 'application/json'
               },
              async: false,
              success : function(data) {
            var message = data.message;
            if(message == "success"){
               //成功的反馈处理
            }else{
               if(message == "faild") {
                     // 失败的反馈处理
            }
              }
           }); 
其中包含了许多jq选择器的一些操作,可以单独的对每一行处理。
最终的数据集合应该是一个数组集合objs,其中obj是由一些属性和两个对象,一个列表组成的。
其中对象core,record,和list集合codes组成了对象obj.而多个obj组成了list集合的objs在controller层通过list来接收,我们只需要定义obj对象即可,
然后sping就会完成对应的映射。
最后需要注意的时ajax请求发送的单独设置:
data:JSON.stringify(objs)
headers : {
                   'Accept' : 'application/json',
                   'Content-Type' : 'application/json'
               }
这样的设置明确的告诉了spring处理器提交的是json数据。然后就可以了,在上述的数据收集过程中我们可以单独的过滤每行数据。
其实对于jq的操作并不难,就是麻烦的不行。自此记录一下自己的收集过程。方便以后拿过来就用。
本文来源于网络:查看 >
【推荐】帖子搞不懂,找猿2048老师指导一下?
« 上一篇:input实现文字换行
» 下一篇:form表单post方式导出excel表格数据
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
阿里云
相关博文
推荐案例
×添加代码片段