一、Ztree的基本样式

最新推荐文章于 2021-02-12 09:59:37 发布

咸鱼最牛逼

最新推荐文章于 2021-02-12 09:59:37 发布

阅读量4.4k

点赞数

分类专栏： JS插件：zTree

本文链接：https://blog.csdn.net/panchang199266/article/details/80713330

版权

JS插件：zTree 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

（一）背景介绍
本案例主要就“简单JSON数据”为例进行讲解，主要涉及到：
1.引入的文件
demo.css、zTreeStyle.css、jquery-1.4.4.min.js、jquery.ztree.core.js
2.“最简单的树–简单JSON数据”

        data:{
                //是否套用简单数据格式，自动生成结构图
                simpleData:{
                    //开启简单数据
                    enable:true,
                    //节点id
                    idKey:"id",
                    //父节点
                    pIdKey:"pId",
                    //根节点
                    rootPId:0
                    }
                }
            };

3.不显示连接线
4.不显示节点图标

        view:{
                //是否显示连接线
                showLine:false,
                //是否显示节点图标（默认为true）
                showIcon:true
                }

5.自定义图标

{"id":1,"pId":0,"name":"test1", "open":true, iconOpen:"css/zTreeStyle/img/diy/1_open.png", iconClose:"css/zTreeStyle/img/diy/1_close.png"}

6.超链接。

{"id":2,"pId":1,"name":"test1-1", icon:"css/zTreeStyle/img/diy/2.png", url:"", target:"_blank", click:"alert('我是不会跳转的...');"}

（二）案例

<!DOCTYPE html>
<HTML>
<head>
<TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <!--必须导入的四个文件  start-->
  <link rel="stylesheet" href="css/demo.css" type="text/css">
  <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
  <!--必须导入的四个文件  end-->
  <SCRIPT LANGUAGE="JavaScript">
        //var zTreeObj;
        var setting = {
            view:{
                //是否显示连接线
                showLine:false,
                //是否显示节点图标（默认为true）
                showIcon:true
                },
            data:{
                //是否套用简单数据格式，自动生成结构图
                simpleData:{
                    //开启简单数据
                    enable:true,
                    //节点id
                    idKey:"id",
                    //父节点
                    pIdKey:"pId",
                    //根节点
                    rootPId:0
                    }
                }
            };
        //构成节点的数据
        /**
        * 知识点：
        * 自定义图标：iconOpen、iconClose、icon：设置节点打开、关闭的图标，和叶子节点的图标
        * 超链接：url、target、click（简单点击事件，复杂事件，使用onclick事件回调函数）
        */
        var zNodes = [
            {"id":1,"pId":0,"name":"test1", "open":true, iconOpen:"css/zTreeStyle/img/diy/1_open.png", iconClose:"css/zTreeStyle/img/diy/1_close.png"},
            {"id":2,"pId":1,"name":"test1-1", icon:"css/zTreeStyle/img/diy/2.png", url:"", target:"_blank", click:"alert('我是不会跳转的...');"},
            {"id":3,"pId":1,"name":"test1-1", url:"http://www.treejs.cn/", target:"_blank"},
            {"id":4,"pId":0,"name":"test2", "open":true},
            {"id":5,"pId":4,"name":"test2-1"},
            {"id":6,"pId":4,"name":"test2-2"},
            {"id":7,"pId":6,"name":"test2-2-1"},
            {"id":8,"pId":6,"name":"test2-2-2", "isParent":true},
        ];
        $(document).ready(function(){
            //初始化
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
  </SCRIPT>
</head>
    <BODY>
        <div>
            <!-- class必须为“ztree” -->
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </BODY>
</HTML>

咸鱼最牛逼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一、Ztree的基本样式

（一）背景介绍本案例主要就“简单JSON数据”为例进行讲解，主要涉及到： 1.引入的文件 demo.css、zTreeStyle.css、jquery-1.4.4.min.js、jquery.ztree.core.js 2.“最简单的树–简单JSON数据” data:{ //是否套用简单数据格式，自动生成结构图 ...
复制链接

扫一扫

专栏目录