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

　　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;
}

最后的实现效果。

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