Recently, I am developing the permission module, and I plan to use ztree to build a menu tree for selection and echo. Because the new page and the echo page are all together, the generality problem is considered, and a simple data format is used. See the code for details:
Idea 1: Use ajax request to obtain the entire tree result first, and then request the data that needs to be selected
js code:
$(window).load(function() {
loadTree();
// load tree
function loadTree() {
//Get the id attribute to determine whether to add or echo
var roleId = "${AuthRole.roleId}";
//Root directory Id, ztree is used to determine which layer the tree structure starts from
var rootId = 0;
var setting = {
async : {
enable : false
},
data : {
key : {
//The name definition displayed by the tree structure
name : "resName"
}，
//Data definition of tree structure (mapping own fields and fields defined by ztree)
simpleData : {
enable : true,
idKey : "resId",
pIdKey : "presId",
rootPId : rootId
}
},
view : {
selectedMulti : true
},
check : {
enable : true,
chkboxType : {
"Y" : "ps",
"N" : "s"
}
}
};
var treeNode = null;
//Get the permission set of the current role
if (roleId != null) {
$.ajax({
url : "/manager/cjbb/authority/authRes/getAuthResForRole.ht",
data : {
roleId : roleId
},
async : false,
success : function(data) {
treeNode = data;
}
});
}
//Get all permissions
$.ajax({
url : "/manager/cjbb/authority/authRes/getAuthResTree.ht",
async : false,
success : function(result) {
//4. Initialize ztree
var treeObj = $.fn .zTree.init($("#resourcesTree"), setting,
result);
treeObj.expandAll(true);
if (treeNode != null && treeNode.length > 0) {
// Traverse the menu data associated with the selected role
for (var i = 0; i < treeNode.length; i++) {
// Traverse the character nodes that need to be selected, and then use the node ID to get the nodes in the same tree as him, set to selected
var nodes = treeObj.getNodesByParam(" resId",
treeNode[i].resId, null);
//Check the currently selected node
treeObj.checkNode(nodes[0], true, false);
}
}
}
});
html code:
<!-- 权限树 -->
<div id="resourcesTree" class="ztree"
style="overflow: auto; clear: left"></div>
Idea 2: Assemble the data in the background and add tags to the permissions of the role. This method only needs to be requested once;
Add a field selected to the permission entity, get the set of all permissions in the background, and directly query the set of permissions of the current role, traverse, and set the selected attribute of the permissions of the current role in all permission sets to true;
Add this code when generating tree when echoing in the foreground:
treeObj.checkNode(treeObj.getNodeByParam("selected", true, null), true, true);
You can select and echo the current role permissions in the tree!