第一步:引入ztree相关资源
官方下载地址 : http://www.treejs.cn/v3/demo.php
百度网盘下载链接:https://pan.baidu.com/s/1kV4-2N8zfDTdeHmTLryzbA
提取码:goxa
<!--引入jqurey-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<!--引入ztree-->
<link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.min.js"></script>
第二步: 创建ztree容器,存放树
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
第三步:初始化ztree(可用异步请求获取数据,这里只是展示静态数据)
<script>
$(function () {
//菜单 id为一级目录 PId为二级目录 open为默认打开子级目录 checked
var zNodes =[
{ id:11, pId:1, name:"随意勾选 1-1", open:true},
{ id:111, pId:11, name:"随意勾选 1-1-1"},
{ id:112, pId:11, name:"随意勾选 1-1-2"},
{ id:12, pId:1, name:"随意勾选 1-2", open:true},
{ id:121, pId:12, name:"随意勾选 1-2-1"},
{ id:122, pId:12, name:"随意勾选 1-2-2"},
{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
{ id:21, pId:2, name:"随意勾选 2-1"},
{ id:22, pId:2, name:"随意勾选 2-2", open:true},
{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
{ id:222, pId:22, name:"随意勾选 2-2-2"},
{ id:23, pId:2, name:"随意勾选 2-3"},
{ id:1, pId:0, name:"随意勾选 1", open:true}
];
//配置
var setting = {
check: {
enable: true,//启用复选框
chkboxType: {"Y": "ps", "N": "ps"}//子被选中父也被选中,父被选中,所有的子都被选中
},
data: {
simpleData: {
enable: true
}
}
};
//第一个参数为zTree的DOM容器,第二个为zTree设置详情可见官网api,第三个为zTree的节点数据
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
思考 : 使用异步请求,后端怎么才能生成该格式的JSON数据
// 只是将固定数据返回,想要动态数据,向数据库请求并思考数据库的查询语句如何产生该格式的JSON数据
ArrayList<Map<String,String>> list = new ArrayList<>
Map<String,String> row1 = new HashMap<String,String>;
row1.put("id",11);
row1.put("pId",1);
row1.put("name","xx");
row1.put("checked","true");
Map<String,String> row2 = new HashMap<String,String>;
row2.put("id",11);
row2.put("pId",1);
row2.put("name","xx");
row2.put("checked","true");
list.add(row1);list.add(row2)
把该list转成JSON即可
sql的查询语句xml版(例)
<!--sq的查询语句-->
<select id="findAuthorDataByRoleId" parameterType="string" resultType="java.util.Map">
select
module_id as id,
parent_id as pId,
name as name,
case
when module_id in (select module_id from ss_role_module where role_id = #{roleId})
then 'true'
else 'false'
end
as checked
from
ss_module
</select>
前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 页面meta/-->
<link rel="stylesheet" href="ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="ztree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/ztree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="ztree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript">
//实现权限分配
var zTreeObj =null;
$(function () {
var zNodes = null;
$(function () {
$.post("/system/module?operation=findAuthorDataByRoleId", // 后端接口地址
{
id: "${role.id}" // 向后端传的数据,要查询的权限的id(一级标签id)
},
function (data) {
zNodes = data;
var setting = {check: {enable: true}, data: {simpleData: {enable: true}}};
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes)
var zTree = $.fn.zTree.getZTreeObj("treeDemo")
zTree.setting.check.chkboxType = {"Y": "ps", "N": "ps"}
zTreeObj.expandAll(true); //true:展开所有
},
"json"
)
});
// 测试的假数据
/*[
{id: 1, pId: 0, name: '平台系统管理', checked: false},
{id: 101, pId: 1, name: '企业管理', checked: false},
{id: 102, pId: 1, name: '部门管理', checked: false},
{id: 103, pId: 1, name: '用户管理', checked: false},
{id: 104, pId: 1, name: '角色管理', checked: false},
{id: 105, pId: 1, name: '模块管理', checked: false},
{id: 106, pId: 1, name: '系统日志管理', checked: false},
{id: 2, pId: 0, name: '题库管理', checked: false},
{id: 201, pId: 2, name: '题目学科管理', checked: false},
{id: 202, pId: 2, name: '题目类型管理', checked: false},
{id: 203, pId: 2, name: '题目管理', checked: false},
{id: 204, pId: 2, name: '题目审核日志', checked: false},
{id: 3, pId: 0, name: '会员管理', checked: false},
{id: 301, pId: 3, name: '会员账号管理', checked: false},
{id: 302, pId: 3, name: '会员答题管理', checked: false}
];*/
/* 向后端提交时的js代码 没有对应的html代码
function submitCheckedNodes() {
//1.获取所有的勾选权限节点
var nodes = zTreeObj.getCheckedNodes(true); //true:被勾选,false:未被勾选
//2.循环nodes,获取每个节点的id,并将数据加入数组
var moduleArrays = [];
for (var i = 0; i < nodes.length; i++) {
moduleArrays.push(nodes[i].id);
}
//3.将数组中的数据使用,连接后,赋值给表单,传入后台
$("#moduleIds").val(moduleArrays.join(','));
$("#icform").submit();
}
*/
</script>
</head>
<body style="overflow: visible;">
<ul id="treeDemo" class="ztree"></ul> // 存放树结构
</body>
</html>