Ztree菜單樹回顯思路和技術實現


最近在開發權限模塊,打算用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中當前角色權限選中回顯!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM