JSP如何保存页面上众多的复选状态

一、描述：

最近写的一个问题管理模块，录入问题时需要选择客户(也就是那些客户存在这些问题)，当保存完问题后，再次编辑问题时，如何从数据库里读取上次选中的客户并展示位勾选状态呢？问题表cust_question表中用一个字段保存选中的客户Id，多个客户用逗号隔开；界面如图：

 

 

二、查询客户的Action方法：

    //查询客户列表
    public String selectCust(){
        HttpServletRequest request = ServletActionContext.getRequest();
        //查询所有客户id,name
        String sql = " select id, name from customer where isvalid = true " ; 
        //查询该条问题现保存的客户Ids
        String sql2 = " select cust_ids from cust_question where isvalid=true and id= "+ques.getId() +" limit 0,1" ;
        Connection conn = null ;
        Statement st = null ;
        ResultSet rs = null;
        List<Map<String,Object>> list = new ArrayList<Map<String,Object>>();
        //这里声明的list就是存放cust_ids字段存放的客户Id转换成list，然后就可以用list的contains方法判断，如果包含则input标签加上checked属性
        List list2 = new ArrayList();
        try {
            conn = BaseDao.getConnection();
            st = conn.createStatement();
            rs = st.executeQuery(sql);
            while(rs.next()){
                Map<String,Object> map = new HashMap<String,Object>();    
                map.put("id", rs.getString("id"));
                map.put("name", rs.getString("name"));
                list.add(map);
            }
            if(ques.getId()>0){ //如何是新增问题则不需要进入此方法
                rs = st.executeQuery(sql2);
                while(rs.next()){
                    String[] ids = rs.getString("cust_ids").split(",");
                    list2 = Arrays.asList(ids);
                }
            }
            
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
        //定义页面输出表格(因为这个页面是嵌入主页面的iframe)
        StringBuffer htmStr = new StringBuffer("<div class=\"wsy_date_box\" id=\"userDiv\">");
        htmStr.append("<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
        //每行显示个数
        int rowSize = 2;
        for(int i=0;i<list.size();i++){
            if(i%rowSize==0){
                htmStr.append("<tr>");
            }
            htmStr.append("<td><span><input type=\"checkbox\" name=\"cust_id\" onclick=\"return sonCheck("+list.get(i).get("c_id")+ ",'"+list.get(i).get("c_trademark") +
                    "');\" id=\""+list.get(i).get("c_id")+"\" value=\""+list.get(i).get("c_trademark")+"\" "+(list2.contains(list.get(i).get("c_id"))?"checked" : "")+ "/>" + list.get(i).get("c_trademark") ); 
            htmStr.append("</span></td>");
            if((i+1)%rowSize==0){
                htmStr.append("</tr>");
            }
        }
        if(list.size()%rowSize!=0){ //如果记录总是不是rowSize的整数倍需要在结尾加上行的结束符</tr>
            htmStr.append("</tr>");
        }
        htmStr.append("</table> </div>");
        
        //html添加js
        htmStr.append("\n<script type=\"text/javascript\">");
        htmStr.append("\nfunction sonCheck(id,name){ debugger ;");
//        htmStr.append("\n alert(\"id...\"+id);");
//        htmStr.append("\n alert(\"name...\"+name);");
        htmStr.append("\n parent.checkCustomer(id,name); ");
//        htmStr.append("\n return false ;");
        htmStr.append("\n }");
        
        htmStr.append("\n</script>");
        
//System.out.println(htmStr.toString());    
        request.setAttribute("quesId", ques.getId()) ;
        request.setAttribute("custList", htmStr.toString());
        
        return "selectCust";

或者在页面处理，因为EL表达式中也可以用List的contains方法；

<input type="checkbox" name="cust_id" onclick="sonCheck(1)" id="chk_${c1.id }" value="${c1.id }" 
                                      ${list2.contains(c1.id) ? "checked" : "" }/>${c1.name }</span>

 

三、父页面JS方法要实现，当用户选择新客户时不能冲掉已经勾选的客户；

<input type="hidden" id="customer_ids" name="ques.customer_ids" value="${qu.customer_ids }" style="width: 500px" />
<input type="text" id="customer_names" name="ques.customer_names" value="${qu.customer_names }" style="width: 500px" readonly="readonly"/>
<script>
    var custIdsArray = new Array(); //存放客户id的数组
    var custNameArray = new Array();
    var custIds = document.getElementById("customer_ids").value;
    var custNames = document.getElementById("customer_names").value;
    //如果是修改问题，则input域是有值的，所以要先填入到JS声明的数组中
    if(custIds!=''){
        custIdsArray = custIds.split(',');
    }
    if(custNames!=''){
        custNameArray = custNames.split(',');
    }
    function checkCustomer(id,name){debugger;
        if(custIdsArray.length>0){
            var status = true ; //用于标识是否从数组中被删除过
            for(var i=0;i<custIdsArray.length;i++){
                var idValue = custIdsArray[i];
                var nameValue = custNameArray[i];
                if(idValue==id){
                    status = false ;
                    custIdsArray.splice(i,1);
                }
                if(nameValue==name){
                    custNameArray.splice(i,1);
                }
            }
            //添加到数组的操作不能在for循环中，因为添加之后数组长度就变了，导致每次添加完后立即有被循环遍历清除掉了
            if(status){ 
                custNameArray.push(name);
                custIdsArray.push(id);
            }
        }else{
            custIdsArray.push(id);
            custNameArray.push(name);
        }        
        
        //alert(custIdsArray.join(","));
        //alert(custNameArray.join(","));
        
        $("#customer_ids").val(custIdsArray.join(",")); //更新隐藏域
        $("#customer_names").val(custNameArray.join(","));
    }    
</script>

这样，在父页面提交时，就可以保证不会冲掉已经选中的客户；

 

此随笔主要记录下如何保存复选框的勾选状态，其实就两处重点：

1. List的contains方法在EL表达式中、Java程序中的使用

2. 还有父页面JS怎么处理保存数据的问题；