使用zTree生成属性菜单

最新推荐文章于 2024-01-25 12:00:00 发布

_AkstNhmyRwn

最新推荐文章于 2024-01-25 12:00:00 发布

阅读量675

点赞数

文章标签： jquery工具 ztree web前端

本文链接：https://blog.csdn.net/DDKii/article/details/78834813

版权

一:zTree下载
1.官网:http://www.treejs.cn/v3/main.php#_zTreeInfo
2.下载:
这里写图片描述
该链接指向码云地址:https://gitee.com/zTree/zTree_v3,使用小乌龟clone一下即可

二:zTree目录结构
这里写图片描述
打开js目录,

1.jQuery-1.4.4.min.js – zTree依赖于,这是zTree提供的jQuery;
2.all,所有ztree工具的继承,all=core+excheck+exedit+exhide;
3.core,核心功能;
4.excheck,勾选功能;
5.exedit,编辑功能;
6.exhide,隐藏功能;

三:zTree生成简单的树形结构
1.效果图:
这里写图片描述
2.步骤:
2.1,在html页面需要插入树形结构的地方写入一个

标签,class=”ztree”,声明id以备jquery获取该节点

    <ul id="baseMenu" class="ztree"></ul>

2.2,在js代码中,声明json的格式类型

        //ps:ztree中有两种数据json格式,具体内容可以查看文档
        var setting={
            data:{
                simpleData:{
                    enable:true //声明使用json简单格式,注意,true后面没有引号!
                }
            }
        };

2.3,构建树形结构

        //提供ztree树形菜单,注意,pid中I大写!
        //id表示该节点,pid表示父节点的id,name为节点内容
        var zNodes=[
            {id:1,pId:0,name:"父节点1"},
            {id:2,pId:0,name:"父节点2"},
            {id:11,pId:1,name:"子节点1"},
            {id:12,pId:1,name:"子节点2"},
            {id:13,pId:2,name:"子节点3"},
            {id:14,pId:2,name:"子节点4"}
        ];

2.4,将树形结构嵌入到html代码

        $.fn.zTree.init($("#baseMenu"),setting,zNodes);

四:完整代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>属性菜单</title>

        <!--引入jQuery-->
        <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

        <!--引入ztree-->
        <script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" />

        <script type="text/javascript">

            $(function(){
                //1.进行ztree菜单设置
                var setting={
                    data:{
                        simpleData:{
                            enable:true //声明json格式,没有引号!
                        }
                    }
                };

                //2.提供ztree树形菜单,pid中I大写
                var zNodes=[
                    {id:1,pId:0,name:"父节点1"},
                    {id:2,pId:0,name:"父节点2"},
                    {id:11,pId:1,name:"子节点1"},
                    {id:12,pId:1,name:"子节点2"},
                    {id:13,pId:2,name:"子节点3"},
                    {id:14,pId:2,name:"子节点4"}
                ];

                //3.绑定菜单到html节点
                $.fn.zTree.init($("#baseMenu"),setting,zNodes);
            })
        </script>
    </head>

    <body>
        <div id="treeBox">
            <ul id="baseMenu" class="ztree"></ul>
        </div>
    </body>
</html>

_AkstNhmyRwn

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用zTree生成属性菜单

一:zTree下载 1.官网:http://www.treejs.cn/v3/main.php#_zTreeInfo 2.下载: 该链接指向码云地址:https://gitee.com/zTree/zTree_v3,使用小乌龟clone一下即可二:zTree目录结构打开js目录, 1.jQuery-1.4.4.min.j
复制链接

扫一扫