本文将详细讲解如何使用zTree实现权限树的回显功能，包括数据结构的设计、API的调用以及与后台交互的逻辑，帮助开发者更好地理解和应用zTree在权限管理场景中的实践。
<script type="text/javascript" src="<%=request.getContextPath() %>/js/easyui/jquery-1.8.3.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=request.getContextPath() %>/js/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript">
var setting = {
//异步加载
async:{
enable:true,//设置 zTree 是否开启异步加载模式
url:"<%=request.getContextPath() %>/getTree.action"
},
//复选框设置
check: {
enable: true,
chkStyle : "checkbox" ,
chkboxType: { "Y": "p", "N": "ps" },
},
data: {//加载数据
simpleData:{
enable:true,//true / false 分别表示 使用 / 不使用 简单数据模式
idKey:"id",
pIdKey:"pid",
rootPId:0
},
key:{//页面上展示数据
name:"menu_name"
}
}
};
//创建树
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
}
);
function tj(){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes(true);
var menuids=[];
for (var i = 0; i < nodes.length; i++) {
menuids.push(nodes[i].id)
}
$.post(
"roleAdd.action",
{role_name:$("[name=role_name]").val(),role_desc:$("[name=role_desc]").val(),menuids:menuids.join()},
function(obj){
alert(obj);
if(obj>0){
location.href="rolelist.action";
}
},
"text"
)
}
</script>
</head>
<body>
<form method="post">
角色名称：<input name="role_name"><br>
角色描述：<input name="role_desc"><br>
权限树： <div id="powerTree">
<ul id="treeDemo" class="ztree"></ul>
</div><br>
<input type="button" onclick="tj()" value="提交">
</form>
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=request.getContextPath() %>/js/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript">
var setting = {
//异步加载
async:{
enable:true,//设置 zTree 是否开启异步加载模式
url:"<%=request.getContextPath() %>/getTree.action"
},
//复选框设置
check: {
enable: true,
chkStyle : "checkbox" ,
chkboxType: { "Y": "p", "N": "ps" },
},
data: {//加载数据
simpleData:{
enable:true,//true / false 分别表示 使用 / 不使用 简单数据模式
idKey:"id",
pIdKey:"pid",
rootPId:0
},
key:{//页面上展示数据
name:"menu_name"
}
}
};
//创建树
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
}
);
function tj(){
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = treeObj.getCheckedNodes(true);
var menuids=[];
for (var i = 0; i < nodes.length; i++) {
menuids.push(nodes[i].id)
}
$.post(
"roleAdd.action",
{role_name:$("[name=role_name]").val(),role_desc:$("[name=role_desc]").val(),menuids:menuids.join()},
function(obj){
alert(obj);
if(obj>0){
location.href="rolelist.action";
}
},
"text"
)
}
</script>
</head>
<body>
<form method="post">
角色名称：<input name="role_name"><br>
角色描述：<input name="role_desc"><br>
权限树： <div id="powerTree">
<ul id="treeDemo" class="ztree"></ul>
</div><br>
<input type="button" onclick="tj()" value="提交">
</form>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
