最近在開發權限模塊,打算用ztree構建一個菜單樹進行選取和回顯,因為新增頁面和回顯頁面都在一起,所以考慮了通用性問題,用的簡單數據格式,具體看代碼:
思路一:利用ajax請求,先獲得整個tree結果,再請求需要選中的數據
js代碼:
$(window).load(function() {
loadTree();
//加載樹
function loadTree() {
//獲得id屬性用於判斷新增還是回顯
var roleId = "${AuthRole.roleId}";
//根目錄Id,ztree用於判斷樹結構從哪一層開始
var rootId = 0;
var setting = {
async : {
enable : false
},
data : {
key : {
//樹結構顯示的名稱定義
name : "resName"
},
//樹結構的數據定義(映射自己字段與ztree定義的字段)
simpleData : {
enable : true,
idKey : "resId",
pIdKey : "presId",
rootPId : rootId
}
},
view : {
selectedMulti : true
},
check : {
enable : true,
chkboxType : {
"Y" : "ps",
"N" : "s"
}
}
};
var treeNode = null;
//獲得當前角色的權限集合
if (roleId != null) {
$.ajax({
url : "/manager/cjbb/authority/authRes/getAuthResForRole.ht",
data : {
roleId : roleId
},
async : false,
success : function(data) {
treeNode = data;
}
});
}
//獲得所有權限
$.ajax({
url : "/manager/cjbb/authority/authRes/getAuthResTree.ht",
async : false,
success : function(result) {
//4.初始化ztree
var treeObj = $.fn.zTree.init($("#resourcesTree"), setting,
result);
treeObj.expandAll(true);
if (treeNode != null && treeNode.length > 0) {
//遍歷勾選角色關聯的菜單數據
for (var i = 0; i < treeNode.length; i++) {
//遍歷需要選中的角色節點,然后利用該節點ID獲得與他相同的tree中的節點,設置為選中
var nodes = treeObj.getNodesByParam("resId",
treeNode[i].resId, null);
//勾選當前選中的節點
treeObj.checkNode(nodes[0], true, false);
}
}
}
});
html代碼:
<!-- 權限樹 -->
<div id="resourcesTree" class="ztree"
style="overflow: auto; clear: left"></div>
思路二:在后台組裝好數據,為角色的權限添加標記,這種方法只需要請求一次即可;
在權限實體中新增一個是否選中的字段selected,在后台獲得所有權限的集合,同時直接查詢當前角色的權限的集合,遍歷,將所有權限集合中當前角色的權限的selected屬性設置為true;
前台回顯時生成tree時加上這句代碼:
treeObj.checkNode(treeObj.getNodeByParam("selected", true, null), true, true);
就可以將tree中當前角色權限選中回顯!