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集合的使用加深练习，记以笔记，以供温故查询。