1.安装:

我用的bower工具，所以执行:

bower install ztree

2.详细功能与配制，请考官方文档：

http://www.treejs.cn/v3/main.php#_zTreeInfo

3.代码:

<!DOCTYPE html>

<HTML>

<HEAD>

    <TITLE>zTree测试</TITLE>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="../bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <script type="text/javascript" src="../bower_components/ztree/js/jquery.ztree.all-3.5.js"></script>

    <SCRIPT LANGUAGE="JavaScript">

        var zTreeObj;

        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）

        var setting = {};

        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）

        var zNodes = [

            {name:"系统管理", open:true, children:[

                    {name:"增加"}, {name:"删除"}]},

            {name:"用户管理", open:true, children:[

                    {name:"激活"}, {name:"修改"}]}

        ];

        $(document).ready(function(){

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

        });

    </SCRIPT>

</HEAD>

<BODY>

<div>

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

</div>

</BODY>

</HTML>

4.效果：

javascript入门 之 zTree （一）的更多相关文章

  1. javascript入门 之 zTree（十四 增删查改）（二）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  2. javascript入门 之 zTree（十四 增删查改）（一）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...

  3. javascript入门 之 zTree（十三 移动/复制事件）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...

  4. javascript入门 之 zTree（十二 托拽事件（二））

    1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...

  5. javascript入门 之 zTree（十一 托拽事件（一））

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...

  6. javascript入门 之 ztree (十 checkbox选中事件)

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...

  7. javascript入门 之 ztree (九 单/复选框问题)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  8. javascript入门 之 ztree (八 一系列鼠标事件)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  9. javascript入门 之 ztree(七 结点的查询)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  10. javascript入门 之 ztree (六 结点的点击和展开/折叠事件)

    1.注意: 测试点击事件时,如果要测试取消选中和追加选中,如果按住ctrl和win键无用,则需要先用鼠标左键按住,然后,在松开左键的前几毫秒按住ctrl键便可! <!DOCTYPE html&g ...

随机推荐

  1. Spark入门（四）--Spark的map、flatMap、mapToPair

    spark的RDD操作 在上一节Spark经典的单词统计中,了解了几个RDD操作,包括flatMap,map,reduceByKey,以及后面简化的方案,countByValue.那么这一节将介绍更多 ...

  2. 给萌新的 TS custom transformer plugin 教程——TypeScript 自定义转换器插件

    xuld/原创 Custom transformer (自定义转换器)是干什么的 简单说,TypeScript 可以将 TS 源码编译成 JS 代码,自定义转换器插件则可以让你定制生成的代码.比如删掉 ...

  3. JAVA和C#中数据库连接池原理与应用

    JAVA和C#中数据库连接池原理 在现在的互联网发展中,高并发成为了主流,而最关键的部分就是对数据库操作和访问,在现在的互联网发展中,ORM框架曾出不穷, 比如:.Net-Core的EFCore.Sq ...

  4. 什么是Hibernate

    Hibernate是一个基于JDBC的主流持久性框架,是一个优秀的ORM(object relation mapping)(对象关系映射)实现 ORM就是通过java对象映射到数据库表中,通过操作ja ...

  5. [模板] dfs序

    B.树之呼吸-贰之型-dfs序 Time Limit: 1000 MS Memory Limit: 32768 K Total Submit: 42 (16 users) Total Accepted ...

  6. C 2012年笔试题

    1指出程序段中的错误:分析错误的原因,并进行修改 1.1函数 swap 将两个字符串(字符数组作实参,长度不超过 100)的内容进行交换 void swap(char *pa,char *pb) { ...

  7. Layui-admin-iframe通过页面链接直接在iframe内打开一个新的页面，实现单页面的效果

    前言: 使用Layui-admin做后台管理框架有很长的一段时间了,但是一直没有对框架内iframe菜单栏切换跳转做深入的了解.今天有一个这样的需求就是通过获取超链接中传递过来的跳转地址和对应的tab ...

  8. 项目脚手架 - 《Spring Boot + MyBatis + MyBatis Generator》

    前言 最近启动了一个新的项目发现,每当一个新项目的启动往往需要从头搭建一个"框架",其中虽然很多基础代码可以Copy,但也会浪费不少时间. 基于这个情况,我打算在GitHub上创建 ...

  9. Java中的集合类、Lambda、鲁棒性简述

    集合类 在java.util包中提供了一些集合类,常用的有List.Set和Map类,其中List类和Set类继承了Collection接口.这些集合类又称为容器,长度是可变的,数组用来存放基本数据类 ...

  10. elasticsearch报Fielddata is disabled on text fields by default

    我刚玩elk没几天,今天启动kibana之后执行查询看见elasticsearch报了一个错误 Caused by: java.lang.IllegalArgumentException: Field ...