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怎么处理保存数据的问题；