实现复选框选择的功能

2015年4月9日 天气冷

这里以“用户授权”为例说明

实现方法一(适合弹出modal的场景)：

后台代码如下：

/**
 * 用户授权
 * */
public String authorization() throws Exception {
    //action为0代表请求授权页面,action为1代表需要更新数据到数据库
    if (getAction().equals("0")) {
        user = userService.get(userId);
        //获得用户所有权限
        allRoleList = roleService.getAllRole();
        //获得用户已有权限
        Set<Role> userRoleList = user.getRoles();
        //循环所有权限,如果用户已经选中,则标记,前台显示打钩
        outer: for (Role userRole : userRoleList) {
            inner: for (Role allRole : allRoleList) {
                if (userRole.getRoleId().equals(allRole.getRoleId())) {
                    allRole.setIsCheck();
                    break inner;
                }
            }
        }
        return ROLE;
    } else {
        userService.authorization(userId, roles);
        setPageData();
        return SUCCESS;
    }
}
           

这段代码的大体意思是：在用户所有权限中，通过用户已有的权限与用户所有权限比较，将已有的权限在用户所有权限中做了一个标记isCheck(1)，所以在界面前端就可以通过如下的代码实现勾选的动作了

前端代码如下：

<!-- 如果用户已经赋予权限，进来的时候权限要勾上 -->
<c:forEach items="${requestScope.allRoleList}" var="role">
      <c:choose>
           <c:when test="${role.isCheck == 1}">
                <input  type="checkbox" name="roles" value="${role.roleId}" checked="checked">${role.roleName}
           </c:when>
            <c:otherwise>
                 <input type="checkbox" name="roles" value="${role.roleId}">${role.roleName}
             </c:otherwise>
       </c:choose>
</c:forEach>
           

需要注意的地方是遇到json中要放一个对象及ArrayList的时候，可以把该对象及ArrayList放到一个Map中，由Map同一输出

当然有的同学会说，我不在后台在标记，直接在前端做可以吗。那当然可以，于是就有了第二种做法

实现方法二(适合于从一个跳转到另一个界面的场景,包括dialog中页面的跳转)：

<c:choose>
    <c:when test="${not empty customerIdsMap}">
        <input type="checkbox" name="ids" value="${proposer.id}" 
        <c:forEach items="${customerIdsMap}" var="cid">
            <c:if test="${cid == proposer.id}">
                checked="checked"
            </c:if>
        </c:forEach>
        />${proposer.trueName}
    </c:when>

    <c:otherwise>
        <input type="checkbox" name="ids" value="${proposer.id}" />${proposer.trueName}
    </c:otherwise>
</c:choose>
           

不过这个实现需要在后台分别返回customerIdsMap及proposer的对象，这两个对象一定要在同一域中，比如Json和request交叉混合就不行。因为request中的对象容易刷新丢失。