1、首先需要下载ztree插件,

2、把下载的插件中的js和css放到项目中去(img文件默认放到css文件下方,如果把img文件放到其他地方,加载出来的树将没有默认图标(文件夹图标)和节点前的展开闭合的加减号,

3、在项目中引入jquery.js、ztree核心js、zTreeStyle.css

jquery-1.4.2.js、jquery.ztree.core-3.x.js、zTreeStyle.css  这三个都是ztree插件中的,其中jquery.js  可以是更高版本的

这是基本使用,复杂的还需添加jquery.ztree.excheck-3.5.jsjquery.ztree.exedit-3.5.js   最好都添加上

4、写一个ztree的容器<ul id="treeDemo" class="ztree"></ul>       其中class是必须的,且值必须是ztree,id是ztree初始化后ztree的treeId

5、设置setting    var setting = {};

6、ztree数据

var zNodes = [ {name:"test1", open:true, children:[ {name:"test1_1"}, {name:"test1_2"}]}, {name:"test2", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ];

7、初始化ztree

zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

8、若setting设置   simpleData    则树节点数据可以是简单数组(即不需要写成上方zNodes那样的json嵌套格式)

var setting = {
           simpleData: {
           enable: true
       };

此时zNodes可以是下面格式

var zNodes =[
           { id:1, pId:0, name:"节点搜索演示 1", t:"id=1", open:true},
           { id:11, pId:1, name:"关键字可以是名字", t:"id=11"},
           { id:12, pId:1, name:"关键字可以是level", t:"id=12"},
           { id:13, pId:1, name:"关键字可以是id", t:"id=13"},
           { id:14, pId:1, name:"关键字可以是各种属性", t:"id=14"},
            { id:2, pId:0, name:"节点搜索演示 2", t:"id=2", open:true},
           { id:21, pId:2, name:"可以只搜索一个节点", t:"id=21"},
          { id:22, pId:2, name:"可以搜索节点集合", t:"id=22"},
          { id:23, pId:2, name:"搜我吧", t:"id=23"},
          { id:3, pId:0, name:"节点搜索演示 3", t:"id=3", open:true },
          { id:31, pId:3, name:"我的 id 是: 31", t:"id=31"},
          { id:32, pId:31, name:"我的 id 是: 32", t:"id=32"},
          { id:33, pId:32, name:"我的 id 是: 33", t:"id=33"}
  ];

ztre的使用入门的更多相关文章

  1. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  3. Oracle分析函数入门

    一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...

  4. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  5. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  6. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  7. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  8. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  9. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

随机推荐

  1. 关于oracle表名区分大小写的问题

    oracle不是区分大小写的,是建表的时候是没有去掉双引号.   CREATE TABLE TableName(id number); //虽然写的时候是有大写和小写,但是在数据库里面是不区分的.   ...

  2. python的list

    1.定义list >>> li = ["a", "b", "mpilgrim", "z", " ...

  3. 在 ServiceModel 客户端配置部分中,找不到引用协定“XX”的默认终结点元素的解决方法

    今天在CRM2011中写Plugin的的时调用WCF报错,错误如下:"在 ServiceModel 客户端配置部分中,找不到引用协定"XX"的默认终结点元素.这可能是因为 ...

  4. DB Query Analyzer 6.03, the most excellent Universal DB Access tools on any Microsoft Windows OS

      DB Query Analyzer 6.03, the most excellent Universal database Access tools on any Microsoft Wind ...

  5. Linux网络设置(第二版) --互联网寻址过程

    Linux网络设置 --互联网寻址过程 1.TCP/IP与OSI参考模型比较 TCP/IP OSI 物理层 网卡 数据链路层 * MAC地址 网络层 IP,ICMP,ARP协议 传输层 TCP,UDP ...

  6. Android ROM开发(一)——Windows下Cygwin和Android_Kitchen厨房的安装

    Android ROM开发(一)--Windows下Cygwin和Android_Kitchen厨房的安装 很久没有碰到ROM开发了,在很久很久以前也是从ROM起步的,无奈还是一脚踏上了Android ...

  7. Sping--ApplicationEvent

    //让其他的应用事件继承它 public abstract class ApplicationEvent extends EventObject { /** use serialVersionUID ...

  8. 在 Linux 下用 mkdir 命令来创建目录和子目录

    mkdir 是什么呢 Mkdir 是一个用来在 Linux 系统下创建目录的命令.此命令属于内建命令. 运行 mkdir 命令 你可以在你的控制台直接键入 mkdir 来使用它. $ mkdir 默认 ...

  9. OpenCV——老照片效果

    // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...

  10. Java语言实现二分法

    二分法是一个简单,高效,并广泛应用的查找方法 import java.util.arrays; public class BinarySearch { public static int rank(i ...