ZTree树

最新推荐文章于 2024-04-26 15:21:07 发布

Z_海瑞_Z

最新推荐文章于 2024-04-26 15:21:07 发布

阅读量166

点赞数

分类专栏：工具文章标签： java 经验分享

ZHRZ

本文链接：https://blog.csdn.net/qq_20286065/article/details/107015694

版权

工具专栏收录该内容

22 篇文章 2 订阅

订阅专栏

第一步:引入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>

Z_海瑞_Z

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ZTree树

第一步:引入ztree相关资源下载地址 : http://www.treejs.cn/v3/demo.php<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script><link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.c
复制链接

扫一扫