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

一、描述：

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

二、思路

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

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

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

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

三、程序实现

java查询数据：

 1     public String sendQuestion(){
 2         HttpServletRequest request = ServletActionContext.getRequest();
 3         //查询问题相关角色SQL；客服、测试、技术
 4         String sql_role = "select id,name from role where isvalid = true and c_id in (7,8,9)";
 5
 6         Connection conn = null;
 7         Statement st = null;
 8         ResultSet rs = null;
 9         try {
10             conn = BaseDao.getConnection();
11             st = conn.createStatement();
12             rs = st.executeQuery(sql_role);
13             //查询角色表，保存角色id和角色名称
14             List<Map<String,Object>> list_role = new ArrayList<Map<String,Object>>();
15             while(rs.next()){
16                 Map<String,Object> data  = new HashMap<String, Object>();
17                 data.put("id", rs.getInt("id"));
18                 data.put("name", rs.getString("name"));
19                 list_role.add(data);
20             }
21             //声明按角色分组存放用户的map<角色信息,该角色的用户> ;这里似乎应该用TreeMap，但HashMap好像也可以，这个先放一边
22             Map<Map<String,Object>,List<Map<String,Object>>> map = new HashMap<Map<String,Object>,List<Map<String,Object>>>();
23             for(int i=0;i<list_role.size();i++){ //遍历角色，并查询每个角色的所有用户
24                 int roleId = (Integer)list_role.get(i).get("c_id");
25                 String sql = "select u.id ,u.name  from user u where u.isvalid = true and u.roleid = "+roleId ;
26                 rs = st.executeQuery(sql);
27                 List<Map<String,Object>> users  = new ArrayList<Map<String,Object>>();
28                 while(rs.next()){
29                     Map<String,Object> user = new HashMap<String,Object>();
30                     user.put("user_id", rs.getInt("id"));
31                     user.put("user_name", rs.getString("name"));
32                     users.add(user);
33                 }
34                 //分组保存用户
35                 map.put(list_role.get(i), users);
36             }
37
38             request.setAttribute("ulist", map);
39
40         } catch (SQLException e) {
41             e.printStackTrace();
42         }finally{
43             BaseDao.closeResources(st, rs);
44         }
45
46         return "selectUsers" ;
47     }

JSP页面展示处理：

 1 <a class="wsy_f14 wsy_nomarginright"><span>选择下一节处理人：&nbsp;</span><button type="button" onclick="return queryUsers();" >展开/缩回</button></a>
 2     <div class="wsy_standard_box" id="userDiv" style="display: none;">
 3         <table width="100%" border="0" cellspacing="0" cellpadding="0">
 4             <c:forEach items="${ulist }" var="ulist">
 5               <tr>
 6                 <th width="8%" align="left" valign="baseline" scope="col">${ulist.key.c_name }</th>
 7                 <td width="92%" align="left" valign="baseline" scope="col">
 8                 <c:forEach items="${ulist.value }" var="v1">
 9                 <span>
10                     <input type="radio" name="quesLogs.next_roleName" onclick="sonCheck(‘${v1.user_id }‘)" id="nextUserId"
11                       value="${v1.user_id }_${ulist.key.c_id}" />${v1.user_name }
12                 </span>
13                 </c:forEach>
14                 </td>
15             </tr>
16             </c:forEach>
17
18         </table>
19     </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集合的使用加深练习，记以笔记，以供温故查询。