權限模塊__分配權限__顯示樹狀結構1

顯示樹狀結構；依賴關系

setPrivilegeUI.jsp

    <!-- 顯示權限樹 -->
    <td>
        <!--用它回顯
        <s:checkboxlist name="privilegeIds" list="#privilegeList" listKey="id" listValue="name"></s:checkboxlist>
    -->
    <%--控制樣式 --%>
    <s:iterator value="#privilegeList"
 
>
        <input type="checkbox" name="privilegeIds" value="${id }" id="cb_${id}"
        <s:property value="%{id in privilegeIds ? ‘checked‘ : ‘‘}" />                                
    />
    <label for="cb_${id }">${name }</label><%--點文字也能選中 --%>
    <br>
    </
 
s:iterator>
    </td>         

權限模塊__分配權限__顯示樹狀結構3

setPrivilegeUI.jsp

Js、css文件導入

    <script language="javascript" src="${pageContext.request.contextPath}/script/jquery_treeview/jquery.treeview.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/blue/file.css"
 
 />
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/jquery_treeview/jquery.treeview.css" />

setPrivilegeUI.jsp中添加

<!-- 顯示樹狀結構內容 -->
<ul id="tree">
<s:iterator value="#application.topPrivilegeList">
    <li>
        <input type="checkbox" name="privilegeIds" value="${id}" id="cb_${id}" <s:property value="%{id in privilegeIds ? ‘checked‘ : ‘‘}"/> />
        <label for="cb_${id}"><span class="folder">${name}</span></label>
        <ul>
        <s:iterator value="children">
            <li>
                <input type="checkbox" name="privilegeIds" value="${id}" id="cb_${id}" <s:property value="%{id in privilegeIds ? ‘checked‘ : ‘‘}"/> />
                <label for="cb_${id}"><span class="folder">${name}</span></label>
                <ul>
                <s:iterator value="children">
                    <li>
                        <input type="checkbox" name="privilegeIds" value="${id}" id="cb_${id}" <s:property value="%{id in privilegeIds ? ‘checked‘ : ‘‘}"/> />
                        <label for="cb_${id}"><span class="folder">${name}</span></label>
                    </li>
                </s:iterator>
                </ul>
            </li>        
        </s:iterator>
        </ul>
    </li>
</s:iterator>
</ul>

權限模塊__分配權限__顯示樹狀結構__頁面中的選中效果

setPrivilegeUI.jsp中添加

<script type="text/javascript">
        $(function(){
            // 指定事件處理函數
            $("[name=privilegeIds]").click(function(){
                
                // 當選中或取消一個權限時，也同時選中或取消所有的下級權限
                $(this).siblings("ul").find("input").attr("checked", this.checked);
                
                // 當選中一個權限時，也要選中所有的直接上級權限
                if(this.checked == true){
                    $(this).parents("li").children("input").attr("checked", true);
                }
                
            });
        });
    </script>

權限模塊_分配權限_顯示樹狀結構_頁面中的選中效果