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中当前角色权限选中回显!