Easy-的樹形外掛實現許可權選中效果
阿新 • • 發佈：2018-12-21
最近需要一個實現一個許可權設定，如果通過手工的設定一個一個輸入的話，弄不好要瘋掉，所以就來一個程式圖形化的展示資料然後選中。
至於樹形結構的話選擇有很多，本著以前使用過Easy-UI的情況下，就決定用Easy-UI 的樹形結構實現了
話不多說，先看效果：
這是選中部分子節點的：
這是選中全部子節點的：
可以看到我們的許可權直接變為父節點的，這樣符合父許可權包含所有子許可權的規則，個人使用的Shiro，設計初衷也是如此。更多的效果圖就不放出來了，有興趣的可以自己試一下。
接下來就是實現的過程了。
① 資料準備：作為一個簡單的demo，肯定不用資料庫了，這樣方便練習。就用json即可，記得把下面的資料儲存為一個json檔案，然後url請求它
Permissions：所有的許可權資料
[ { "children": [],//字許可權集合 "id": "1",//許可權id "permission": "common:*",//許可權描述符 "pid": "0",//父分類id 0為定級id "text": "控制檯"//許可權名字 }, { "children": [ { "children": [ { "children": [ { "children": [], "id": "5", "permission": "bussiness:roadsort:add", "pid": "4", "text": "新增線路類別" }, { "children": [], "id": "6", "permission": "bussiness:roadsort:update", "pid": "4", "text": "修改線路類別" }, { "children": [], "id": "7", "permission": "bussiness:roadsort:delete", "pid": "4", "text": "刪除線路類別" }, { "children": [], "id": "8", "permission": "bussiness:roadsort:log", "pid": "4", "text": "線路類別操作日誌" }, { "children": [], "id": "9", "permission": "bussiness:roadsort:collection", "pid": "4", "text": "批量操作線路類別" } ], "id": "4", "permission": "bussiness:roadsort:*", "pid": "3", "text": "線路類別" }, { "children": [ { "children": [], "id": "11", "permission": "bussiness:stroke:add", "pid": "10", "text": "新增行程模板" }, { "children": [], "id": "12", "permission": "bussiness:stroke:update", "pid": "10", "text": "修改行程模板" }, { "children": [], "id": "13", "permission": "bussiness:stroke:collection", "pid": "10", "text": "批量操作行程模板" }, { "children": [], "id": "14", "permission": "bussiness:stroke:log", "pid": "10", "text": "行程模板日誌" } ], "id": "10", "permission": "bussiness:stroke:*", "pid": "3", "text": "行程模板" }, { "children": [ { "children": [], "id": "16", "permission": "bussiness:roadmanager:add", "pid": "15", "text": "新建線路" }, { "children": [], "id": "17", "permission": "bussiness:roadmanager:update", "pid": "15", "text": "修改線路" }, { "children": [], "id": "18", "permission": "bussiness:roadmanager:collection", "pid": "15", "text": "批量操作線路" }, { "children": [], "id": "19", "permission": "bussiness:roadmanager:log", "pid": "15", "text": "線路操作日誌" }, { "children": [], "id": "20", "permission": "bussiness:roadmanager:rubbish", "pid": "15", "text": "線路回收站" } ], "id": "15", "permission": "bussiness:roadmanager:*", "pid": "3", "text": "線路管理" } ], "id": "3", "permission": "bussiness:road:*", "pid": "2", "text": "線路" }, { "children": [ { "children": [], "id": "22", "permission": "bussiness:regiment:add", "pid": "21", "text": "新建團期" }, { "children": [], "id": "23", "permission": "bussiness:regiment:newverify", "pid": "21", "text": "建團稽核" }, { "children": [], "id": "24", "permission": "bussiness:regiment:update", "pid": "21", "text": "修改團期" }, { "children": [], "id": "25", "permission": "bussiness:regiment:copy", "pid": "21", "text": "複製建團" }, { "children": [], "id": "26", "permission": "bussiness:regiment:delete", "pid": "21", "text": "刪除團期" }, { "children": [], "id": "27", "permission": "bussiness:regiment:cancle", "pid": "21", "text": "取消團期" }, { "children": [], "id": "28", "permission": "bussiness:regiment:downandup", "pid": "21", "text": "上下線操作" }, { "children": [], "id": "29", "permission": "bussiness:regiment:seal", "pid": "21", "text": "封團/解封" }, { "children": [], "id": "30", "permission": "bussiness:regiment:sealverify", "pid": "21", "text": "封團稽核" }, { "children": [], "id": "31", "permission": "bussiness:regiment:end", "pid": "21", "text": "結團操作" }, { "children": [], "id": "32", "permission": "bussiness:regiment:statistics", "pid": "21", "text": "我的統計" }, { "children": [], "id": "33", "permission": "bussiness:regiment:customerlist", "pid": "21", "text": "檢視名單" } ], "id": "21", "permission": "bussiness:regiment:*", "pid": "2", "text": "團期" }, { "children": [ { "children": [], "id": "35", "permission": "bussiness:order:newverify", "pid": "34", "text": "新單稽核" }, { "children": [], "id": "36", "permission": "bussiness:order:refundfirstverify", "pid": "34", "text": "退款初審" }, { "children": [], "id": "37", "permission": "bussiness:order:refundlastverify", "pid": "34", "text": "退款終審" }, { "children": [], "id": "38", "permission": "bussiness:order:paysettle", "pid": "34", "text": "繳費結算" }, { "children": [], "id": "39", "permission": "bussiness:order:refundsettle", "pid": "34", "text": "退款結算" }, { "children": [], "id": "40", "permission": "bussiness:order:verify", "pid": "34", "text": "修改稽核" }, { "children": [], "id": "41", "permission": "bussiness:order:detail", "pid": "34", "text": "訂單詳情" } ], "id": "34", "permission": "bussiness:order:*", "pid": "2", "text": "訂單" }, { "children": [ { "children": [ { "children": [], "id": "44", "permission": "bussiness:resource:provider:add", "pid": "43", "text": "新增供應商" }, { "children": [], "id": "45", "permission": "bussiness:resource:provider:update", "pid": "43", "text": "修改供應商" }, { "children": [], "id": "46", "permission": "bussiness:resource:provider:delete", "pid": "43", "text": "刪除供應商" } ], "id": "43", "permission": "bussiness:resource:provider:*", "pid": "42", "text": "供應商管理" }, { "children": [ { "children": [], "id": "48", "permission": "bussiness:resource:guide:add", "pid": "47", "text": "新增導遊" }, { "children": [], "id": "49", "permission": "bussiness:resource:guide:update", "pid": "47", "text": "修改導遊" }, { "children": [], "id": "50", "permission": "bussiness:resource:guide:delete", "pid": "47", "text": "刪除導遊" }, { "children": [], "id": "51", "permission": "bussiness:resource:guide:guideregiment", "pid": "47", "text": "排團表" } ], "id": "47", "permission": "bussiness:resource:guide:*", "pid": "42", "text": "導遊管理" } ], "id": "42", "permission": "bussiness:resource:*", "pid": "2", "text": "資源" } ], "id": "2", "permission": "bussiness:*", "pid": "0", "text": "業務" }, { "children": [], "id": "52", "permission": "customer:*", "pid": "0", "text": "客戶管理" }, { "children": [], "id": "53", "permission": "finance:*", "pid": "0", "text": "財務" }, { "children": [], "id": "54", "permission": "numerical:*", "pid": "0", "text": "統計報表" }, { "children": [ { "children": [ { "children": [], "id": "57", "permission": "system:employ:addorg", "pid": "56", "text": "新建組織" }, { "children": [], "id": "58", "permission": "system:employ:updateorg", "pid": "56", "text": "編輯組織" }, { "children": [], "id": "59", "permission": "system:employ:deleteorg", "pid": "56", "text": "刪除組織" }, { "children": [], "id": "60", "permission": "system:employ:add", "pid": "56", "text": "新增員工" }, { "children": [], "id": "61", "permission": "system:employ:update", "pid": "56", "text": "修改員工" }, { "children": [], "id": "62", "permission": "system:employ:delete", "pid": "56", "text": "刪除員工" }, { "children": [], "id": "63", "permission": "system:employ:leave", "pid": "56", "text": "標記離職" } ], "id": "56", "permission": "system:employ:*", "pid": "55", "text": "員工帳號" }, { "children": [ { "children": [], "id": "65", "permission": "system:role:add", "pid": "64", "text": "新增角色" }, { "children": [], "id": "66", "permission": "system:role:update", "pid": "64", "text": "修改角色" }, { "children": [], "id": "67", "permission": "system:role:delete", "pid": "64", "text": "刪除角色" } ], "id": "64", "permission": "system:role:*", "pid": "55", "text": "角色許可權設定" } ], "id": "55", "permission": "system:*", "pid": "0", "text": "系統配置" } ]
Roles：所有的角色資料 沒有實現許可權樹的效果，具體實現其實一樣，有需要的同學可以實現
[ { "available": "yes",//是否可用 "children": [//子節點 { "available": "yes", "children": [], "description": "一級管理員", "id": "2", "pid": "1", "text": "一級管理員" }, { "available": "yes", "children": [], "description": "二級管理員", "id": "3", "pid": "1", "text": "二級管理員" } ], "description": "頂級管理員",// "id": "1",//許可權id "pid": "0",//父id "text": "系統管理員"//節點文字描述 }, { "available": "yes", "children": [ { "available": "yes", "children": [], "description": "董事長", "id": "5", "pid": "4", "text": "董事長" }, { "available": "yes", "children": [], "description": "總經理", "id": "6", "pid": "4", "text": "總經理" }, { "available": "yes", "children": [], "description": "大區經理", "id": "7", "pid": "4", "text": "大區經理" }, { "available": "yes", "children": [], "description": "人事總監", "id": "8", "pid": "4", "text": "人事總監" }, { "available": "yes", "children": [], "description": "財務總監", "id": "9", "pid": "4", "text": "財務總監" } ], "description": "集團領導", "id": "4", "pid": "0", "text": "集團領導" }, { "available": "yes", "children": [ { "available": "yes", "children": [ { "available": "yes", "children": [], "description": "業務部經理", "id": "12", "pid": "11", "text": "業務部經理" }, { "available": "yes", "children": [], "description": "旅遊部經理", "id": "13", "pid": "11", "text": "旅遊部經理" } ], "description": "旅行社社長", "id": "11", "pid": "10", "text": "旅行社社長" }, { "available": "yes", "children": [], "description": "旅行社主任", "id": "14", "pid": "10", "text": "旅行社主任" }, { "available": "yes", "children": [], "description": "酒店店長", "id": "15", "pid": "10", "text": "酒店店長" }, { "available": "yes", "children": [], "description": "酒店主任", "id": "16", "pid": "10", "text": "酒店主任" } ], "description": "分公司領導", "id": "10", "pid": "0", "text": "分公司領導" } ]
② OK資料準備完畢，接下來就是測試效果 ，引入js，css什麼的咱就不贅述了，自行參考官網實現。Html程式碼如下，記得把url對應的值變為json所在的位置，個人使用的是資料庫版本，所以書寫了對應的controller和service等元件，各位也可以嘗試一下。
其中需要注意的是用到的方法：
$("#xxx").tree({…}) js非同步載入樹形結構
$("#xxx").tree(‘getChecked’{…}) 獲取所有選中的子節點
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Tree - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="easy/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easy/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easy/demo.css">
<script type="text/javascript" src="easy/jquery.min.js"></script>
<script type="text/javascript" src="easy/jquery.easyui.min.js"></script>
<script>
//選中的許可權id
var pids = ''
//選中的許可權描述
var pers = ''
$(function () {
$("#perms").tree({
url: '/bm/perm/perms',//資料來源
checkbox: true,//顯示前面的選項框
//觸發check函式 處理許可權的父子級問題
onCheck: function (node) {
//獲取父節點
//判斷是否是葉子節點並且被選中
if (node.children.length == 0 && node.checkState == 'checked') {
//判斷節點id是否存在pids中 如果不存在存在的話新增進去
if (pids.search(node.id) == -1) {
pids += node.id + ","
pers += node.text + ","
}
//處理父子聯動的問題
leaf(node)
//是葉子節點沒有選中
} else if (node.children.length == 0 && node.checkState == 'unchecked') {
//判斷節點id是否存在 如果存在的話去除
if (pids.search(node.id) != -1) {
pids = pids.replace(node.id + ",", "")
pers = pers.replace(node.text + ",", "")
}
//處理父子聯動的問題
leaf(node)
//不是葉子節點且被選中的處理
} else if (node.children.length >= 0 && node.checkState == 'checked') {
//判斷是否是頂級節點 是頂級節點的話且不存在直接新增
if (node.pid == '0') {
if (pids.search(node.id) == -1) {
pids += node.id + ","
pers += node.text + ","
}
}
//判斷節點id是否存在 存在不做操作 不存在新增
if (pids.search(node.id) == -1) {
pids += node.id + ","
pers += node.text + ","
}
//解決子節點存在pids的問題 去除所有選中父節點下的子節點的資料
childiter(node)
//解決父節點選中與否的問題
leaf(node)
//不是葉子節點且沒被選中
} else if (node.children.length >= 0 && node.checkState == 'unchecked') {
//判斷是否是頂級節點
if (node.pid == '0') {
//如果存在則去除
if (pids.search(node.id) != -1) {
pids = pids.replace(node.id + ",", "")
pers = pers.replace(node.text + ",", "")
}
}
//判斷節點是否存在 存在去除
if (pids.search(node.id) != -1) {
pids = pids.replace(node.id + ",", "")
pers = pers.replace(node.text + ",", "")
}
childiter(node)
leaf(node)
}
//測試效果
console.log(pids)
$("#pers").text(pers)
}
})
//角色描述
var rool = ''
//角色id
var roolid = ''
//測試角色和許可權新增的效果使用 只看聯動效果的請註釋掉
$("#roles").tree({
url: '/bm/role/roles',
method: "get",
//觸發check函式
onClick: function (node) {
$("#rols").text(node.text)
rool = node.text
roolid = node.id
$.ajax({
url: '/bm/role/showpermsbyroleid',
type: "post",
data: {"id": roolid},
dataType: 'json',
success: function (data) {
//獲取之前被選中的資料並去除
var cks = $("#perms").tree('getChecked')
for (var i = 0; i < cks.length; i++) {
$("#perms").tree('uncheck', cks[i].target)
}
//獲取根據角色查詢的許可權 從新渲染
for (var i = 0; i < data.permissions.length; i++) {
$("#perms").tree('check', $("#perms").tree('find', data.permissions[i].id).target)
}
}
})
}
})
//新增角色許可權的方法 只看效果的把這一段註釋掉
$("#perr").click(function () {
$.ajax({
url: '/bm/rolepermission/add',
type: "post",
data: {"rid": roolid, "pid": pids},
dataType: 'json',
success: function (data) {
console.log(data)
}
})
})
})
//迴圈去除不需要的子節點
function childiter(node) {
if (node.children.length > 0) {
//迴圈去除存在的子節點
for (var i = 0; i < node.children.length; i++) {
pids = pids.replace(node.children[i].id + ",", "")
pers = pers.replace(node.children[i].text + ",", "")
childiter(node.children[i])
}
}
}
//迴圈判斷父節點情況
function leaf(node) {
if (node != null) {
var par = $("#perms").tree('getParent', node.target)
//判斷是否全選了葉子節點
if (par != null && par.checkState == 'checked') {
//迴圈去除存在子節點
for (var i = 0; i < par.children.length; i++) {
if (pids.search(par.children[i].id) != -1) {
pids = pids.replace(par.children[i].id + ",", "")
pers = pers.replace(par.children[i].text + ",", "")
}
}
if (pids.search(par.id) == -1) {
pids += par.id + ","
pers += par.text + ","
}
//判斷是否不是全選葉子節點
} else if (par != null && par.checkState == "indeterminate") {
//如果父級節點存在 則去除
if (pids.search(par.id) != -1) {
pids = pids.replace(par.id + ",", "")
pers = pers.replace(par.text + ",", "")
}
for (var i = 0; i < par.children.length; i++) {
//判斷葉子結點是否被選中
if (par.children[i].checkState == 'unchecked') {
if (pids.search(par.children[i].id) != -1) {
pids = pids.replace(par.children[i].id + ",", "")
pers = pers.replace(par.children[i].text + ",", "")
}
} else {
if (pids.search(par.children[i].id) == -1 && par.children[i].checkState == 'checked') {
pids += par.children[i].id + ","
pers += par.children[i].text + ","
}
}
}
}
//迭代判斷
leaf(par)
}
}
</script>
</head>
<body>
<h2>Perms Tree</h2>
<p>dhhs.perms</p>
<div>
<div class="easyui-panel" style="width: 100%">
<ul class="easyui-tree" id="perms" style="padding:5px;width: 40%;float:left;">
</ul>
<ul class="easyui-tree" id="roles" style="padding:5px;width: 40%;float:left;">
</ul>
<input type="button" value="確認新增許可權" id="perr" style="position:fixed;margin-top: 80px">
<div class="easyui-panel"
style="padding:5px;width: 15%;float:right;height: 500px;position:fixed;;margin-top: 100px">
<span style="font-size: larger;font-family: '華文行楷'">您選擇的角色為：
</span><br/><span style="color: crimson;font-size: larger;font-family: '華文行楷';" id="rols"></span><br/>
<span style="font-size: larger;font-family: '華文行楷'">您選擇的許可權有：
</span><br/><span style="color: crimson;font-size: larger;font-family: '華文行楷';" id="pers"></span>
</div>
</div>
</div>
</body>
<script>
</script>
</html>
感謝各位忍著性子看到這裡，下面的程式碼其實可有可無了，是在嘗試的時候寫的程式碼，在完成之後發現其中的冗餘程度令人髮指，而且只適用固定層級的樹結構，故提取出來上面的算是比較精簡版的，剛入行的菜鳥，希望大家多多包涵，有興趣的同學可以看一下最初產品，阿里嘎多。
初心：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Tree - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="easy/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easy/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easy/demo.css">
<script type="text/javascript" src="easy/jquery.min.js"></script>
<script type="text/javascript" src="easy/jquery.easyui.min.js"></script>
<script>
var pids = ''
var pers = ''
$(function () {
$("#perms").tree({
url: '/bm/perm/perms',
checkbox: true,
//觸發check函式
onCheck: function (node) {
//獲取父節點
var par = $("#perms").tree('getParent', node.target)
//判斷是否是葉子節點並且被選中
if (node.children.length == 0 && node.checkState == 'checked') {
pids += node.id + ","
pers += node.text + ","
//判斷是否全選了葉子節點
if (par != null && par.checkState == 'checked') {
//迴圈去除存在子節點
for (var i = 0; i < par.children.length; i++) {
if (pids.search(par.children[i].id) != -1) {
pids = pids.replace(par.children[i].id + ",", "")
pers = pers.replace(par.children[i].text + ",", "")
}
}
if (pids.search(par.id) == -1) {
pids += par.id + ","
pers += par.text + ","
}
//判斷是否不是全選葉子節點
} else if (par != null && par.checkState == "indeterminate") {
for (var i = 0; i < par.children.length; i++) {
//判斷葉子結點是否被選中
if (par.children[i].checkState == 'unchecked') {
if (pids.search(par.children[i].id) != -1) {
pids = pids.replace(par.children[i].id + ",", "")
pers = pers.replace(par.children[i].text + ",", "")
}
} else {
if (pids.search(par.children[i].id) == -1 && par.children.checkState == 'checked') {
pids += par.children[i].id + ","
pers += par.children[i].text + ","
}
}
}
}
if (par != null) {
//獲取父節點的父節點
var parr = $("#perms").tree('getParent', par.target)
if (parr != null && parr.checkState == 'indeterminate') {
//如果父級節點存在 則去除
if (pids.search(parr.id) != -1) {
pids = pids.replace(parr.id + ",", "")
pers = pers.replace(parr.text + ",", "")
}
console.log(pids + "after")
//迴圈判斷子節點的情況
for (var i = 0; i < parr.children.length; i++) {
//判斷葉子結點是否被選中
if (parr != null && parr.children[i].checkState == 'unchecked') {
if (pids.search(parr.children[i].id) != -1) {
pids = pids.replace(parr.children[i].id + ",", "")
pers = pers.replace(parr.children[i].text + ",", "")
}
} else if (parr != null && parr.children[i].checkState == 'checked') {
if (pids.search(parr.children[i].id) == -1 && par.children[i].checkState == 'checked') {
pids += parr.children[i].id + ","
pers += parr.children[i].text + ","
}
}
}
} else if (parr != null && parr.checkState == 'checked') {
//迴圈去除存在子節點
for (var i = 0; i < parr.children.length; i++) {
if (pids.search(parr.children[i].id) != -1) {
pids = pids.replace(parr.children[i].id + ",", "")
pers = pers.replace(parr.children[i].text + ",", "")
}
}
if (pids.search(parr.id) == -1) {
pids += parr.id + ","
pers += parr.text + ","
}
//判斷是否不是全選葉子節點
}
//獲取父節點的父節點的父節點
var parrr = $("#perms").tree('getParent', parr.target)
if (parrr != null && parrr.checkState == 'indeterminate') {
//如果父級節點存在 則去除
if (pids.search(parrr.id) != -1) {
pids = pids.replace(parrr.id + ",", "")
pers = pers.replace(parrr.text + ",", "")
}
//迴圈判斷子節點的情況
for (var i = 0; i < parrr.children.length; i++) {
//判斷葉子結點是否被選中
if (parrr != null && parrr.children[i].checkState == 'unchecked') {
if (pids.search(parrr.children[i].id) != -1) {
pids = pids.replace(parrr.children[i].id + ",", "")
pers = pers.replace(parrr.children[i].text + ",", "")
}
} else if (parrr != null && parrr.children[i].checkState == 'checked') {
if (pids.search(parrr.children[i].id) == -1 && parrr.children[i].checkState == 'checked') {
pids += parrr.children[i].id + ","
pers += parrr.children[i].text + ","
}
}
}
} else if (parrr != null && parrr.checkState == 'checked') {
//迴圈去除存在子節點
for (var i = 0; i < parrr.children.length; i++) {
if (pids.search(parrr.children[i].id) != -1) {
pids = pids.replace(parrr.children[i].id + ",", "")
pers = pers.replace(parrr.children[i].text + ",", "")
}
}
if (pids.search(parrr.id) == -1) {
pids += parrr.id + ","
pers += parrr.text + ","
}
//判斷是否不是全選葉子節點
}
}
//葉子節點沒有選中
} else if (node.children.length == 0 && node.checkState == 'unchecked') {
//判斷節點id是否存在
if (pids.search(node.id) != -1) {
pids = pids.replace(node.id + ",", "")
pers = pers.replace(node.text + ",", "")
//判斷父節點是否是被全選狀態
} else if (par.checkState == "indeterminate") {
//如果父級節點存在 則去除
if (pids.search(par.id) != -1) {
pids = pids.replace(par.id + ",", "")
pers = pers.replace(par.text + ",", "")
}
//迴圈判斷子節點的情況
for (var i = 0; i < par.children.length; i++) {
//判斷葉子結點是否被選中
if (par != null && par.children[i].checkState == 'unchecked') {
if (pids.search(par.children[i].id) != -1) {
pids = pids.replace(par.children[i].id + ",", "")
pers = par.replace(par.children[i].text + ",", "")
}
} else if (par != null && par.children[i].checkState == 'checked') {
if (pids.search(par.children[i].id) == -1 && par.children[i].checkState == 'checked') {
pids += par.children[i].id + ","
pers += par.children[i].text + ","
}
}
}
if (par != null) {
//獲取父節點的父節點
var parr = $("#perms").tree('getParent', par.target)
if (parr != null && parr.checkState == 'indeterminate') {
//如果父級節點存在 則去除
if (pids.search(parr.id) != -1) {
pids = pids.replace(parr.id + ",", "")
pers = pers.replace(parr.text + ",", "")
}
//迴圈判斷子節點的情況
for (var i = 0; i < parr.children.length; i++) {
//判斷葉子結點是否被選中
if (parr != null && parr.children[i].checkState == 'unchecked') {
if (pids.search(parr.children[i].id) != -1) {
pids = pids.replace(parr.children[i].id + ",", "")
pers = pers.replace(parr.children[i].text + ",", "")
}
} else if (parr != null && parr.children[i].checkState == 'checked') {
if (pids.search(parr.children[i].id) == -1 && par.children[i].checkState == 'checked') {
pids += parr.children[i].id + ","
pers += parr.children[i].text + ","
}
}
}
} else if (parr != null && parr.checkState == 'checked') {
//迴圈去除存在子節點
for (var i = 0; i < parr.children.length; i++) {
if (pids.search(parr.children[i].id) != -1) {
pids = pids.replace(parr.children[i].id + ",", "")
pers = pers.replace(parr.children[i].text + ",", "")
}
}
if (pids.search(parr.id) == -1) {
pids += parr.id + ","
pers += parr.text + ","
}
//判斷是否不是全選葉子節點
}
//獲取父節點的父節點的父節點
var parrr = $("#perms").tree('getParent', parr.target)
if (parrr != null && parrr.checkState == 'indeterminate') {
//如果父級節點存在 則去除
if (pids.search(parrr.id) != -1) {
pids = pids.replace(parrr.id + ",", "")
pers = pers.replace(parrr.text + ",", "")
}
//迴圈判斷子節點的情況
for (var i = 0; i < parrr.children.length; i++) {
//判斷葉子結點是否被選中
if (parrr != null && parrr.children[i].checkState == 'unchecked') {
if (pids.search(parrr.children[i].id) != -1) {
pids = pids.replace(parrr.children[i].id + ",", "")
pers = pers.replace(parrr.children[i].text + ",", "")
}
} else if (parrr != null && parrr.children[i].checkState == 'checked') {
if (pids.search(parrr.children[i].id) == -1 && parrr.children[i].checkState == 'checked') {
pids += parrr.children[i].id + ","
pers += parrr.children[i].text + ","
}
}
}
} else if (parrr != null && parrr.checkState == 'checked') {
//迴圈去除存在子節點
for (var i = 0; i < parrr.children.length; i++) {
if (pids.search(parrr.children[i].id) != -1) {
pids = pids.replace(parrr.children[i].id + ",", "")
pers = pers.replace(parrr.children[i].text + ",", "")
}
}
if (pids.search(parrr.id) == -1) {
pids += parrr.id + ","
pers += parrr.text + ","
}
//判斷是否不是全選葉子節點
}
}
}
//不是葉子節點且被選中的處理
} else if (node.children.length >= 0 && node.checkState == 'checked') {
//判斷是否是頂級節點
if (node.pid == '0') {
pids += node.id + ","
pers += node.text + ","
}
//判斷節點id是否存在 存在不做操作 不存在新增
if (pids.search(node.id) == -1) {
pids += node.id + ","
pers += node.text + ","
}
if (node.children.length > 0) {
//迴圈去除存在的子節點
for (var i = 0; i < node.children.length; i++) {
pids = pids.replace(node.children[i].id + ",", "")
pers = pers.replace(node.children[i].text + ",", "")
if (node.children[i].children.length > 0) {
for (var j = 0; j < node.children[i].children.length; j++) {
pids = pids.replace(node.children[i].children[j].id + ",", "")
pers = pers.replace(node.children[i].children[j].text + ",", "")
if (node.children[i].children[j].children.length > 0) {
for (var k = 0; k < node.children[i].children[j].children.length; k++) {
pids = pids.replace(node.children[i].children[j].children[k].id + ",", "")
pers = pers.replace(node.children[i].children[j].children[k].text + ",", "")
}
}
}
}
}
}
if (par != null && par.checkState == "indeterminate") {
//如果父級節點存在 則去除
if (par != null && pids.search(par.id) != -1) {
pids = pids.replace(par.id + ",", "")
pers = pers.replace(par.text + ",", "")
}
//迴圈判斷子節點的情況
for (var i = 0; i < par.children.length; i++) {
//判斷葉子結點是否被選中
if (par != null && par.children[i].checkState == 'unchecked') {
if (pids.search(par.children[i].id) != -1) {
pids = pids.replace(par.children[i].id + ",", "")
pers = pers.replace(par.children[i].text + ",", "")
}
} else if (par != null && par.children[i].checkState == 'checked') {
if (pids.search(par.children[i].id) == -1 && par.children[i].checkState == 'checked') {
pids += par.children[i].id + ","
pers += par.children[i].text + ","
}
}
}
} else if (par != null && par.checkState == 'checked') {
//迴圈去除存在子節點
for (var i = 0; i < par.children.length; i++) {
if (pids.search(par.children[i].id) != -1) {
pids = pids.replace(par.children[i].id + ",", "")
pers = pers.replace(par.children[i].text + ",", "")
}
}
if (pids.search(par.id) == -1) {
pids += par.id + ","
pers += par.text + ","
}
//判斷是否不是全選葉子節點
}
//獲取父節點的父節點
if (par != null) {
var parr = $("#perms").tree('getParent', par.target)
if (parr != null) {
if (parr != null && parr.checkState == 'indeterminate') {
//如果父級節點存在 則去除
if (pids.search(parr.id) != -1) {
pids = pids.replace(parr.id + ",", "")
pers = pers.replace(parr.text + ",", "")
}
//迴圈判斷子節點的情況
for (var i = 0; i < parr.children.length; i++) {
//判斷葉子結點是否被選中
if (parr != null && parr.children[i].checkState == 'unchecked') {
if (pids.search(parr.children[i].id) != -1) {
pids = pids.replace(parr.children[i].id + ",", "")
pers = par.replace(parr.children[i].text + ",", "")
}
} else if (parr != null && parr.children[i].checkState == 'checked') {
if (pids.search(parr.children[i].id) == -1 && parr.children[i].checkState == 'checked') {
pids += parr.children[i].id + ","
pers += parr.children[i].text + ","
}
}
}
} else if (parr != null && parr.checkState == 'checked') {
//迴圈去除存在子節點
for (var i = 0; i < parr.children.length; i++) {
if (pids.search(parr.children[i].id) != -1) {
pids = pids.replace(parr.children[i].id + ",", "")
pers = pers.replace(parr.children[i].text + ",", "")
}
}
if (pids.search(parr.id) == -1) {
pids += parr.id + ","
pers += parr.text + ","
}
//判斷是否不是全選葉子節點
}
}
}
//不是葉子節點且沒被選中
} else if (node.children.length >= 0 && node.checkState == 'unchecked') {
//判斷是否是頂級節點
if (node.pid == '0') {
//如果存在則去除
if (pids.search(node.id) != -1) {
pids = pids.replace(node.id + ",", "")
pers = pers.replace(node.text + ",", "")
}
}
//判斷節點是否存在 存在去除
if (pids.search(node.id) != -1) {
pids = pids.replace(node.id + ",", "")
pers = pers.replace(node.text + ",", "")
}
if (node.children.length > 0) {
//迴圈去除存在的子節點
for (var i = 0; i < node.children.length; i++) {
pids = pids.replace(node.children[i].id + ",", "")
pers = pers.replace(node.children[i].text + ",", "")
if (node.children[i].children.length > 0) {
for (var j = 0; j < node.children[i].children.length; j++) {
pids = pids.replace(node.children[i].children[j].id + ",", "")
pers = pers.replace(node.children[i].children[j].text + ",", "")
if (node.children[i].children[j].children.length > 0) {
for (var k = 0; k < node.children[i].children[j].children.length; k++) {
pids = pids.replace(node.children[i].children[j].children[k].id + ",", "")
pers = pers.replace(node.children[i].children[j].children[k].text + ",", "")
}
}
}
}
}
}
//父節點不為空且不是子節點全部選中
if (par != null && par.checkState == 'indeterminate') {
//如果父級節點存在 則去除
if (pids.search(par.id) != -1) {
pids = pids.replace(par.id + ",", "")
pers = pers.replace(par.text + ",", "")
}
//迴圈判斷子節點的情況
for (var i = 0; i < par.children.length; i++) {
//判斷葉子結點是否被選中
if (par != null && par.children[i].checkState == 'unchecked') {
//不被選中則去除
if (pids.search(par.children[i].id) != -1) {
pids = pids.replace(par.children[i].id + ",", "")
pers = pers.replace(par.children[i].text + ",", "")
}
} else if (par != null && par.children[i].checkState == 'checked') {
if (pids.search(par.children[i].id) == -1 && par.children[i].checkState == 'checked') {
pids += par.children[i].id + ","
pers += par.children[i].text + ","
}
}
}
} else if (par != null && par.checkState == 'checked') {
//迴圈去除存在子節點
for (var i = 0; i < par.children.length; i++) {
if (pids.search(par.children[i].id) != -1) {
pids = pids.replace(par.children[i].id + ",", "")
pers = pers.replace(par.children[i].text + ",", "")
}
}
if (pids.search(par.id) == -1) {
pids += par.id + ","
pers += par.text + ","
}
//判斷是否不是全選葉子節點
}
//獲取父節點的父節點
if (par != null) {
var parr = $("#perms").tree('getParent', par.target)
if (parr != null) {
if (parr != null && parr.checkState == 'indeterminate') {
//如果父級節點存在 則去除
if (pids.search(parr.id) != -1) {
pids = pids.replace(parr.id + ",", "")
pers = pers.replace(parr.text + ",", "")
}
//迴圈判斷子節點的情況
for (var i = 0; i < parr.children.length; i++) {
//判斷葉子結點是否被選中
if (parr != null && parr.children[i].checkState == 'unchecked') {
if (pids.search(parr.children[i].id) != -1) {
pids = pids.replace(parr.children[i].id + ",", "")
pers = par.replace(parr.children[i].text + ",", "")