使用zTree加载角色信息

最近在做一个将用户,角色,权限关联查询的功能,其中需要根据角色的id查询出该角色拥有的所有的权限,然后使用zTree控件进行展示数据思路如下
先要引入zTree的JS文件和样式,这个不通用,根据需要自己引入相应的zTree的js文件和样式文件

<link rel="stylesheet" href="${ctx}/static/plugin/ztree/css/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ctx}/static/plugin/ztree/js/jquery.ztree.all-3.5.min.js"></script>

JSP页面

<script>
var zNodes = ${authJson};
</script>

setting:zTree的属性

var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
};

zNodes:要加载的数据

使用以下方法加载:

var zTree;
$(document).ready(function(){
$.fn.zTree.init($("#ztree"), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj("ztree")
});

根据角色id,获取权限ztree,并且默认选中对应的权限

function getAuthTreeByRole(roleid){
$("#editAuthRoleId").val(roleid);
$.post(webContext + "/platform/role/getAuthTreeByRole/"+roleid,function(data){
//先删除原有的树结构
$.fn.zTree.destroy("ztree");

//根据获取的信息创建新的
zNodes = jQuery.parseJSON(data);
$.fn.zTree.init($("#ztree"), setting, zNodes);
zTree = $.fn.zTree.getZTreeObj("ztree");
});
}

以上代码只是提供思路,不能直接粘贴运行,如有疑问,期待你的回复交流
Ztree是一个非常流行的jQuery树形控件,它可以用来实现多种树形结构的功能。在ztree中,输入框加载下拉字典通常是指使用动态加载节点的方式,在用户输入搜索内容时,根据输入的关键词实时从服务器获取并显示匹配的节点数据。这里介绍一种基本的实现方法: 1. 首先,你需要在页面上引入ztree的CSS和JavaScript文件。 2. 然后,初始化ztree控件,并创建一个基本的树形结构。 3. 接下来,你需要准备一个服务器端的接口,该接口可以根据用户的输入动态返回匹配的节点数据。 4. 最后,使用ztree的动态加载节点功能,绑定输入框的事件处理函数,将用户的输入发送到服务器接口,并将返回的数据动态添加到树中。 这里是一个简化的示例代码: ```javascript // 假设已经引入了ztree所需的CSS和JS文件 // 定义树节点数据 var zNodes = [ { id: 1, name: "节点1", open: true, isParent: true }, { id: 2, name: "节点2", open: true, isParent: true }, // ... 其他节点 ]; // 初始化ztree var setting = { data: { simpleData: { enable: true, idKey: "id", pIdKey: "pId", rootPId: 0 } } }; var treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); // 绑定输入框事件,实现动态加载 $("#iptSearch").bind("input propertychange", function () { var searchVal = $(this).val(); // 调用ztree的动态加载节点函数 treeObj.async.checkAsyncData({ url: "yourServerApi", data: { key: searchVal } }, function (nodes) { if (nodes) { // 将返回的数据添加到树中 treeObj.addNodes(nodes, 0, function (nodes) { // 可以在这里处理添加节点后的逻辑,比如展开父节点等 }); } }); }); ``` 在上面的代码中,`yourServerApi` 是你需要实现的服务器端接口,它应该接收一个 `key` 参数,并返回匹配该关键字的节点数据。返回的数据格式需要遵循ztree的节点格式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值