JSP页面数据展示：分组数据展示

一、描述：

页面上要展示的数据只要写好sql从数据库查出来即可，但是展示有时候不是太好处理。比如工作中遇到的这种情况：有一个问题处理的流程，其中需要选择下一处理人，这些处理人要以部门的形式分组展示，实现如下图所示的效果：

二、思路

因为是小项目，项目只使用了strut框架，数据库使用普通的JDBC通过C3P0连接数据库；

a)首先按角色分组查询出所有用户，每个角色的用户存到List里面；

b)然后把每组角色放到一个Map里面去，这样可以通过角色获取到对应角色用户的List；

c)JSP页面上通过JSTL标签的foreach标签将结果显示出来；

三、程序实现

java查询数据：

     public String sendQuestion(){
         HttpServletRequest request = ServletActionContext.getRequest();
         //查询问题相关角色SQL；客服、测试、技术
         String sql_role = "select id,name from role where isvalid = true and c_id in (7,8,9)";

         Connection conn = null;
         Statement st = null;
         ResultSet rs = null;
         try {
             conn = BaseDao.getConnection();
             st = conn.createStatement();
             rs = st.executeQuery(sql_role);
             //查询角色表，保存角色id和角色名称
             List<Map<String,Object>> list_role = new ArrayList<Map<String,Object>>();
             while(rs.next()){
                 Map<String,Object> data  = new HashMap<String, Object>();
                 data.put("id", rs.getInt("id"));
                 data.put("name", rs.getString("name"));
                 list_role.add(data);
             }
             //声明按角色分组存放用户的map<角色信息,该角色的用户> ;这里似乎应该用TreeMap，但HashMap好像也可以，这个先放一边
             Map<Map<String,Object>,List<Map<String,Object>>> map = new HashMap<Map<String,Object>,List<Map<String,Object>>>();
             for(int i=0;i<list_role.size();i++){ //遍历角色，并查询每个角色的所有用户
                 int roleId = (Integer)list_role.get(i).get("c_id");
                 String sql = "select u.id ,u.name  from user u where u.isvalid = true and u.roleid = "+roleId ;
                 rs = st.executeQuery(sql);
                 List<Map<String,Object>> users  = new ArrayList<Map<String,Object>>();
                 while(rs.next()){
                     Map<String,Object> user = new HashMap<String,Object>();
                     user.put("user_id", rs.getInt("id"));
                     user.put("user_name", rs.getString("name"));
                     users.add(user);
                 }
                 //分组保存用户
                 map.put(list_role.get(i), users);
             }

             request.setAttribute("ulist", map);

         } catch (SQLException e) {
             e.printStackTrace();
         }finally{
             BaseDao.closeResources(st, rs);
         }

         return "selectUsers" ;
     }

JSP页面展示处理：

 <a class="wsy_f14 wsy_nomarginright"><span>选择下一节处理人：&nbsp;</span><button type="button" onclick="return queryUsers();" >展开/缩回</button></a>
     <div class="wsy_standard_box" id="userDiv" style="display: none;">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
             <c:forEach items="${ulist }" var="ulist">
               <tr>
                 <th width="8%" align="left" valign="baseline" scope="col">${ulist.key.c_name }</th>
                 <td width="92%" align="left" valign="baseline" scope="col">
                 <c:forEach items="${ulist.value }" var="v1">
                 <span>
                     <input type="radio" name="quesLogs.next_roleName" onclick="sonCheck('${v1.user_id }')" id="nextUserId"
                       value="${v1.user_id }_${ulist.key.c_id}" />${v1.user_name }
                 </span>
                 </c:forEach>
                 </td>
             </tr>
             </c:forEach>

         </table>
     </div>

JS：

function queryUsers(){
    //展开、隐藏选人DIV
    $("#userDiv").fadeToggle("slow");
    return false ;
}    

//提交表单时验证数据JS
function saveMediaMap() {
    //获取单选框的值
    var dealUser = $("input[name='quesLogs.next_roleName']:checked").val() ;
    if(dealUser==null || dealUser==''){
        alert('请选择下一处理人！');
        return false;
    }

    document.getElementById("saveForm").submit();
}

结束语：

以上实现方式可能不是最好的一种，主要是为页面分组展示数据提供了一种方法，另外也对Map，List集合的使用加深练习，记以笔记，以供温故查询。