1. 程式人生 > >實現複選框選擇的功能

實現複選框選擇的功能

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(1
); 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中的物件容易重新整理丟失。

相關推薦

實現選擇功能

2015年4月9日 天氣冷 這裡以“使用者授權”為例說明 實現方法一(適合彈出modal的場景): 後臺程式碼如下: /** * 使用者授權 * */ public String authorization() throws Except

JQuery 實現功能

  HTML部分 <body> <input type="checkbox" name="fu">全選(父)<br> <input type="checkbox" name="zi">子1<br> <input ty

java實現的全和反功能

在web專案開發中,全選和反選是最常用,也是最基礎的技術: 現在讓小朋為大家來總結幾種小例項: Jquery中: 第一種方法: $("#checkid").click(function(){ if(($("#checkid").attr("checked"))){

ASP.NET實現彈出真分頁將選擇的資料存到資料庫中(二)

上一篇完成了彈出框介面的取值下面是第二步將彈出框儲存的資料傳到父頁面上。 需要在父頁面JS加上: function openDia() { returned = windo

ASP.NET實現彈出真分頁將選擇的資料存到資料庫中(三)

這是第三步將資料在父頁面上顯示。程式碼如下: AddDD.aspx程式碼: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddDJLJDD.aspx.cs" Inherits="WEB.DDGL.

jQuery實現

這裡職務只能勾選一個,所以我打算實現複選框只能單選的功能。 實現思路: 遍歷每一個checkbox,如果有一個選中,其他的就預設未選中狀態,從而實現checkbox單選功能。 js程式碼: //checkbox實現單選 $("input[name='job']:checkb

【JS】用checked實現和全不

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>無標題文件</title>

js實現的全 取消全

html虛擬碼 <table> <tr> <td><input type="checkbox" name="all" id="checkall" onclick="checkAll()" /></td>

js實現的多,全,反

多選,全選,反選 js實現複選框的多選,全選,反選 js實現複選框的多選,全選,反選 <table> <thead> <tr> <th><input type="checkbox"

js實現/全不/反

js實現複選框全選/全不選/反選 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

【javaweb】JQ實現的全與全不

需求:針對複選框,實現全選和全不選的操作 步驟分析:1. 匯入JQ的包                   2. 文件載入完成函式: 頁面初始化         &n

jquery實現全不

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成複選框的全選和全不選</title> <script t

原生js實現全不

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選和全不選</title> <script> function

利用js實現的全和反

<!DOCTYPE html> <html> <head>     <title>142</title>     <meta charset="utf-8">     <script type="t

JavaScript實現的全、全部不、反

以較為簡潔的程式實現複選框的全選、全部不選、反選 操作。 並且將可變的部分設定為JS的引數,以實現程式碼複用。 全選和全不選 第一個引數為複選框名稱,第二個引數為是全選還是全部不選。 function allCheck(name,boolValue) {     var

jquery實現checkbox全 取消全

                jsp中checkbox複選框的個數是依據從資料庫中取出值的條數決定的,是Iterator迴圈遍歷出來的。<td class="rd8"><input type="checkbox" name="selectFlag" id="selectFlag" valu

jquery和js分別實現獲取checkbox的值+jquery實現

//jquery實現全選 $(function(){ $("#checkAll").click(function(){ $(".checkOne").attr("checked",this.checked) }) }) //批量刪除jquery實現提示 function p_d

jquery實現checkbox全,取消全

jsp中checkbox複選框的個數是依據從資料庫中取出值的條數決定的,是Iterator迴圈遍歷出來的。 <td class="rd8"> <input type="checkbox" name="selectFlag" id="selectFlag" value="<%=

下拉中可以實現

(1)要實現的介面形式如下: 下面是jsp頁面中的寫法: <!-- 下面是下拉框中含有複選框。要是能夠傳值,必須重寫easyui——combox,用js新增複選框--> <tr> <td

JS實現的全和全不

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <ti