2. 程式人生 > >樹形選單（jquery.treeview.js）

樹形選單（jquery.treeview.js）

阿新 • • 發佈：2019-01-11
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <title>配置許可權</title> <%@include file="/WEB-INF/jsp/public/header.jsp" %> <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" /> <script type="text/javascript"> $(function
(){ //為許可權複選框繫結單擊事件 $("input[name=privilegeIds]").click(function(){ //選中某個許可權時，同上選中其下級許可權，取消某個許可權時，同上取消其下級許可權 $(this).siblings("ul").find("input").attr('checked',this.checked); //當選中某個許可權時，同上選中其直系上級許可權 if(this.checked){ $(this).parents("li").children("input").attr('checked',true
); }else{ //當取消某個許可權時，如果同級許可權都沒有選中，則將上級許可權也取消 if($(this).parent().siblings("li").children("input:checked").size() == 0){ $(this).parent().parent().siblings("input").attr('checked',false); } } }); }); </script> </head> <body> <!-- 標題顯示 --> <div id="Title_bar"> <div id="Title_bar_Head"> <div id="Title_Head"></div> <div id="Title"><!--頁面標題--> <img border="0" width="13" height="13" src="${pageContext.request.contextPath}/style/images/title_arrow.gif"/> 配置許可權 </div> <div id="Title_End"></div> </div> </div> <!--顯示錶單內容--> <div id=MainArea> <s:form action="role_setPrivilege" namespace="/" theme="simple"> <s:hidden name="id"></s:hidden> <div class="ItemBlock_Title1"><!-- 資訊說明 --><div class="ItemBlock_Title1"> <img border="0" width="4" height="7" src="${pageContext.request.contextPath}/style/blue/images/item_point.gif" /> 正在為【${name }】配置許可權 </div> </div> <!-- 表單內容顯示 --> <div class="ItemBlockBorder"> <div class="ItemBlock"> <table cellpadding="0" cellspacing="0" class="mainForm"> <!--表頭--> <thead> <tr align="LEFT" valign="MIDDLE" id="TableTitle"> <td width="300px" style="padding-left: 7px;"> <!-- 如果把全選元素的id指定為selectAll，並且有函式selectAll()，就會有錯。因為有一種用法：可以直接用id引用元素 --> <input type="CHECKBOX" id="cbSelectAll" onclick=" $('input[name=privilegeIds]').attr('checked',this.checked) "/> <label for="cbSelectAll">全選</label> </td> </tr> </thead> <!--顯示資料列表--> <tbody id="TableData"> <tr class="TableDetail1"> <!-- 顯示許可權樹 --> <td> <!-- 使用struts2標籤顯示許可權，可以回顯，但是不能換行 --> <%-- <s:checkboxlist name="privilegeIds" list="privilegeList" listKey="id" listValue="name"> </s:checkboxlist> --%> <!-- 使用html標籤，可以控制樣式，沒有回顯 --> <%-- <s:iterator value="privilegeList"> <input <s:property value="%{id in privilegeIds ? 'checked' : '' }" /> name="privilegeIds" type="checkbox" value="${id }">${name }<br/> </s:iterator> --%> <ul id="privilegeTree"> <s:iterator value="topPrivilegeList"> <li> <input <s:property value="%{id in privilegeIds ? 'checked' : '' }" /> value="${id }" type='checkbox' name='privilegeIds' id='cb_${id }'/> <label for='cb_${id }'><span class='folder' id='${id }'>${name }</span></label> <ul> <s:iterator value="children"> <li> <input <s:property value="%{id in privilegeIds ? 'checked' : '' }" /> value="${id }" type='checkbox' name='privilegeIds' id='cb_${id }'/> <label for='cb_${id }'><span class='folder' id='${id }'>${name }</span></label> <ul> <s:iterator value="children"> <li> <input <s:property value="%{id in privilegeIds ? 'checked' : '' }" /> value="${id }" type='checkbox' name='privilegeIds' id='cb_${id }'/> <label for='cb_${id }'><span class='folder' id='${id }'>${name }</span></label> </li> </s:iterator> </ul> </li> </s:iterator> </ul> </li> </s:iterator> </ul> </td> </tr> </tbody> </table> </div> </div> <!-- 表單操作 --> <div id="InputDetailBar"> <input type="image" src="${pageContext.request.contextPath}/style/images/save.png"/> <a href="javascript:history.go(-1);"><img src="${pageContext.request.contextPath}/style/images/goBack.png"/></a> </div> </s:form> </div> <div class="Description"> 說明：<br /> 1，選中一個許可權時：<br /> &nbsp;&nbsp;&nbsp;&nbsp; a，應該選中 他的所有直系上級。<br /> &nbsp;&nbsp;&nbsp;&nbsp; b，應該選中他的所有直系下級。<br /> 2，取消選擇一個許可權時：<br /> &nbsp;&nbsp;&nbsp;&nbsp; a，應該取消選擇 他的所有直系下級。<br /> &nbsp;&nbsp;&nbsp;&nbsp; b，如果同級的許可權都是未選擇狀態，就應該取消選中他的直接上級，並遞歸向上做這個操作。<br /> 3，全選/取消全選。<br /> 4，預設選中當前崗位已有的許可權。<br /> </div> <script type="text/javascript"> $("#privilegeTree").treeview(); </script> </body> </html>

相關推薦

樹形選單（jquery.treeview.js）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <title>配置許可權</title> <%@include file="

jQuery 分頁插件（jQuery.pagination.js）ajax 實現分頁

height var 實現 before 狀態 pin 好的 調用 是否 首先需要引入jQuery 再次需要引入 <script src="jquery/jquery.pagination.js"></script>同時也要引入 <link r

前端資料校驗（jquery.validte.js）

1. 預設validate引數的初始化：    這個外掛如果要用，肯定很多頁面都會用到，畢竟如果有表單，就需要驗證。而且這個外掛的預設語言是英語，所以我們要轉換成漢語。我們當然不希望在每個頁面的js都寫一遍message。所以我們可以在公用的js裡面對預設message

上傳（jquery.uploadify.js）

注：這是學習筆記！！！ 首先引用js外掛jquery.uploadify.js 以下是js處理範例，詳細見官網 //上傳圖片附件 var folder = "/Upload/"; $(".

jquery+css+html無限級tree樹形選單（含複選框）

　　最近在做前端頁面改版，將以前的靜態佈局用bootstrap+自定義樣式重構web頁面。今日按jpg效果圖重構了一個樹目錄選單。架構思路不難，跟第一篇發的“非常簡潔的仿js樹形選單”差不多，難在要在細節上處理好，時間有限，就是多選框那裡處理不太好，可以自行再優化。效果向下

js載入三級選單（附帶載入日期）

<script type="text/javascript"> window.onload=function(){ var a = new Array("日", "一", "二", "三", "四", "五", "六"); var week = new Date().get

日記式之jQuery製作簡易選單（2018.12.7）

<html> <head> <meta charset="utf-8"/> <title>jQuery製作簡易選單</title> </head> <script src="js/jquery-

java、js中實現無限層級的樹形結構（類似遞迴）

js中： var zNodes=[{id:0,pId:-1,name:"Aaaa"},     {id:1,pId:0,name:"A"},     {id:11,pId:1,name:"A1"},     {id:12,pId:1,name:"A2"},     {id

jquery ajax pagination分頁的使用例項（內含jquery.pagination.js）

(2)ajax例項： 標籤： <div class="pagelist"></div>    var pageSize =10;     GetData(1);     function GetData(index) {         va

服務端Json數據+js表單數據提交的 表單交互插件（base-form.js）

json 舉例 () 編輯 表單 服務器 erro 問題 java 我們在做表單的查看、編輯裏涉及兩個點： 點1，提交Form表單到服務器，保存到數據庫 點2，頁面顯示Form表單裏的所有字段 如果表單的字段很多，這兩個點會有兩個問題： 1，提交Form時，如何少量代碼

前端基礎（HTML+CSS+JS）-day12

轉載 xhtml 規範 pla desc 響應狀態 pos 怪異 splay 寫在前面 上課第12天，打卡： 　　　　理想三旬； 前言 HTTP協議： 短連接：因為服務器的鏈接數是有限的。 如果一直維持一個長鏈接，那麽資源會很快就被耗盡；

工作中對數組的一些處理，整理（結合underscore.js）

xxx var 工作 arr 整理 對象 分隔 cor soft 1.數組裏邊相同元素提取成map,並以‘’,‘’分隔 　　例如：var arr = [{a:"xx",b:‘‘xxx‘‘},{a:"xxx",b:‘‘xxxxx‘‘},.....]; 　　想要的結果 a =

前端（HTML/CSS/JS）-JavaScript編碼規範

resource htm 容易 blog 語境 asc 也有 命名方式 分享 1. 變量命名 （1）變量名不應以短巧為榮 左邊的變量名都不太清楚，代碼的擴展性不好，一旦代碼需要加功能的話，就容易出現obj1、obj2、obj3這種很抽象的命名方式。所以一開始就要把變

Vue.js實戰 學習筆記 一（初識Vue.js）

hid dom 介紹頁面 pan 分離 name 管理 end 筆記 官方文檔中介紹：漸進式技術棧（漸進式即可以階段性地使用Vue，或者可以在使用jQuery的同時，部分模塊上使用Vue，而不是像Angular一樣一用就是全部使用） 在設計上，使用MVVM（Model-V

8.Appium的基本使用-2（安裝node.js）

nbsp 分享圖片 bsp 使用 span nodejs 圖片 .com inf node.js 下載地址：https://nodejs.org/en/download/下載 64-bit 下載包下載完成雙擊安裝： 8.Appium的基本使用-2（安裝node.j

樹形dp（燈與街道）

https://cn.vjudge.net/contest/260665#problem/E   題意： 給你一個ｎ個點ｍ條邊的無向無環圖，在儘量少的節點上放燈，使得所有邊都被照亮。每盞燈將照亮以它為一個端點的所有邊。 在燈的總數最小的前提下，被兩盞燈同時被照亮的邊數應該儘量大。 &nbs

sublime3使用：自定義快捷鍵、外掛安裝、語法校驗（css和js）

1.快捷鍵大全： https://mp.csdn.net/postedit/84336764 2.新增快捷鍵： 例：ctrl+q 開啟sublime編輯器 preference>>key bindings-user>>編輯設定文件， 輸入 { "key

Chrome - JavaScript除錯技巧總結（瀏覽器除錯JS）

Chrome 是 Google 出品的一款非常優秀的瀏覽器，其內建了開發者工具（ Windows 系統中按下 F12 即可開啟），可以讓我們方便地對 JavaScript 程式碼進行除錯。 為方便大家學習和使用，本文我對 Chrome 的除錯技巧做個系統的

Excel的兩種匯出入門方法（JAVA與JS）

寫在開頭  轉載自簡書  最後附上作者資訊   最近在做一個小專案作為練手，其中使用到了匯出到Excel表格，一開始做的是使用JAVA的POI匯出的，但因為我的資料是爬蟲爬出來的，資料暫時並不儲存在資料庫或後臺，所以直接顯示在HTML的table，需要下載時又要

利用前端三大件（html+css+js）開發一個簡單的“todolist”專案

一、介紹 　　todolist，即待辦事項。在windows android ios上參考微軟家出的那個To-Do應用，大概就是那樣的。我這個更簡單，功能只有“待辦” “已完成”兩項，並且是在瀏覽器開啟的。 二、介面和檔案結構這些... 　　實際在瀏覽器中的網頁如下：　 　　在subline中的檔案結