批量添加、删除控件组--【ssnc】

来源：互联网发布：大数据产业十三五规划编辑：程序博客网时间：2024/06/14 14:27

　　ssnc项目中，有一个需求，像数据库中添加记录，需要将其中的三个控件，做成灵活可添加和删除的控件组，这样可以方便用户的批量添加。
　　做这个功能主要有个技术点，暂时称为技术难点吧（for me ）。
　

1.如何动态的添加 html?

　大致思路是这样的，首先想批量添加控件组，每次点击一次添加按钮，就需要动态的添加一行html代码。而且要三个三个的控件一起添加，就需要把这三个控件放到一个div容器里面，对整个div进行操作。
　jsp页面控件组代码如下，id为addTable的div是定义的防止控件组的容器：
　

    <div class="formitem" >                     <div class="f_label">采摘地块:</div>        <div class="f_item" style="width:138px;overflow:hidden;"><input type="text" name="fqname" id="fqname" maxlength="50" lwidth="120" /></div>          <div class="f_label" style="width:80px">采摘产品:</div>        <div class="f_item"><input type="text" name="pdtname" id="pdtname"  readonly="readonly" maxlength="50" lwidth="120" /></div>        <div class="f_label" style="width:80px">采摘数量:</div>        <div class="f_item"><input type="text" name="nums" id="nums" maxlength="200" lwidth="120" /></div>        <button class="aui_state_highlight" id="btnSetIcon" type="button" onclick="addUpload();" style="margin-left:10px;"> 十 </button>    </div>    <!-- 放置控件组的容器 -->    <div class="formitem"  id ="addTable">    </div>

通过js拼接html的方法：

<script>var count=0;var maxfile=5;//动态添加地块信息 function addUpload(){    // alert(1);     if(count >= maxfile)   return;     count++;     var txt="";     txt+="<div class=\"formitem\" id=divUpload"+count+">";     txt+="<div class=\"f_label\">采摘地块:</div>";     txt+="<div class=\"f_item\" style=\"width:138px;overflow:hidden;\"><input type=\"text\"  name=\"fqname\" id=\"fqname"+count+"\" maxlength=\"50\" lwidth=\"120\" /></div>";     txt+="<div class=\"f_label\" style=\"width:80px\">采摘产品:</div>";     txt+="<div class=\"f_item\"><input type=\"text\"  name=\"pdtname\" id=\"pdtname"+count+"\"  readonly=\"readonly\" maxlength=\"50\" lwidth=\"120\" /></div>";     txt+="<div class=\"f_label\" style=\"width:80px\">采摘数量:</div>";     txt+="<div class=\"f_item\"><input type=\"text\" name=\"nums\" id=\"nums"+count+"\" maxlength=\"200\" lwidth=\"120\" /></div>";     /* txt+='<input type="hidden" name="productuuid" id="'"productuuid"+count'" /><input type="hidden" name="fquuid" id="'"fquuid"+count'"  />' ; */     txt+="<input type=\"hidden\" name=\"productuuid\" id=\"productuuid"+count+"\"  /> <input type=\"hidden\" name=\"fquuid\" id=\"fquuid"+count+"\"  /> ";      txt+= "<a href=\"javascript:delUpload('divUpload" + count + "')\" style=\"margin-left:10px;\">删除</a>";     txt+="</div>";    //document.getElementById("addTable").insertAdjacentHTML("beforeEnd", txt);      $("#addTable").append(txt);    $("#pdtname"+count).ligerTextBox({width:120});    $("#nums"+count).ligerTextBox({width:120});    createsel(count);    }     //动态删除页面地块信息     function delUpload(diva){               count--;          document.getElementById(diva).parentNode.removeChild(document.getElementById(diva));        }function createsel(index){    /* 采摘地块 */    var s1 = createSelect('fqname'+index, {    //valueFieldID:"fquuid"+index,//隐藏域id    textField: 'dyname',//实体类中的基地名称字段    selectBoxHeight: 200,    width:120,    url:'${path}/Yccz/listDkInfo.json',     valueField:'dyuuid',treeLeafOnly:true,forbidTreeCancel:true,    onSelected: function(id, text, data){        var gsel = this;        $("#fquuid"+gsel._sel_index).val(id);            $.get('${path}/Yccz/listProductInfo.json?dyuuid='+id, function(list){                if(list && list.length){                    $("#productuuid"+gsel._sel_index).val(list[0].productuuid);                    $("#pdtname"+gsel._sel_index).val(list[0].pdtname);                }else{                    $("#productuuid"+gsel._sel_index).val('');                    $("#pdtname"+gsel._sel_index).val('');                }                   });        }    });     s1._sel_index = index;}</script>

2.如何动态的删除html?

　删除就是在拼接的添加的html代码中，绑定一个删除的js。
　上面的js中的delUpload方法就是通过DOM对父子节点的操作，来移除动态添加的控件组。
　

3.如何动态的存取html?

　添加和移除控件组还是相对简单的，但是想要保存，需要获取到添加的控件的值，但是它们的控件id唯一不能相同。所以控件组的id要添加一个自增的count,标识不同的id，方便获取；各个控件的name相同，后台springmvc取值的时候，就可以通过request.getParameterValues()取到name相同的控件组的数据了。
　后台取值并遍历添加Action方法：
　

    //添加今日采摘管理信息    @RequestMapping(value="/save.json",method={RequestMethod.POST})    @ResponseBody    public Object save(HttpServletRequest request ){        String fqname[] =request.getParameterValues("fqname");        String fquuid[]=request.getParameterValues("fquuid");        String productuuid[]=request.getParameterValues("productuuid");        String pdtname[]=request.getParameterValues("pdtname");        String[] num=request.getParameterValues("nums");        int[] nums=new int[num.length];        for(int i =0;i<nums.length;i++){            nums[i]=Integer.parseInt(num[i]);        }        String custuuid=request.getParameter("custuuid");        String custrealname=request.getParameter("custrealname");         String helper=request.getParameter("helper");        //采摘时间        SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");        Date picktime = null;        try {            picktime = sdf.parse(request.getParameter("picktime"));        } catch (ParseException e) {            e.printStackTrace();        }        String remark =request.getParameter("remark");        //获取登录的用户姓名        String lmuser=null;        Date lmtime=null;        String cruser=getLoginUsername(request);        Date crtime=new Date();        //获取fqname的长度        int size=java.lang.reflect.Array.getLength(fqname);        for(int i=0 ;i<size;i++){            SnPickRecord pickRecord= new SnPickRecord(2, fquuid[i], fqname[i], productuuid[i], pdtname[i], custuuid, custrealname, helper, picktime, nums[i], remark, cruser, crtime, lmuser, lmtime);            ServiceError info=pickRecordService.add(pickRecord,request);            //return info;          }        return null;                }

4.控件里面还有下拉框和只读文本框的联动，所以还要进行传值

获取地块信息的下拉列表数据：

        /* 采摘地块 */        createSelect('fqname', {        valueFieldID:"fquuid",//隐藏域id        textField: 'dyname',//实体类中的基地名称字段        selectBoxHeight: 200,        url:'${path}/Yccz/listDkInfo.json',         valueField:'dyuuid',treeLeafOnly:true,forbidTreeCancel:true,        onSelected: function(id, text, data){                $.get('${path}/Yccz/listProductInfo.json?dyuuid='+id, function(list){                    if(list && list.length){                        $("#productuuid").val(list[0].productuuid);                        $("#pdtname").val(list[0].pdtname);                    }else{                        $("#productuuid").val('');                        $("#pdtname").val('');                    }                       });            }        });

绑定地块信息和产品信息：

function createsel(index){    /* 采摘地块 */    var s1 = createSelect('fqname'+index, {    //valueFieldID:"fquuid"+index,//隐藏域id    textField: 'dyname',//实体类中的基地名称字段    selectBoxHeight: 200,    width:120,    url:'${path}/Yccz/listDkInfo.json',     valueField:'dyuuid',treeLeafOnly:true,forbidTreeCancel:true,    onSelected: function(id, text, data){        var gsel = this;        $("#fquuid"+gsel._sel_index).val(id);            $.get('${path}/Yccz/listProductInfo.json?dyuuid='+id, function(list){                if(list && list.length){                    $("#productuuid"+gsel._sel_index).val(list[0].productuuid);                    $("#pdtname"+gsel._sel_index).val(list[0].pdtname);                }else{                    $("#productuuid"+gsel._sel_index).val('');                    $("#pdtname"+gsel._sel_index).val('');                }                   });        }    });     s1._sel_index = index;}

最后的实现效果。

这里写图片描述
这段时间工作最大的感触就是，只有想不出的需求，没有写不出的代码。

0 0