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. 使用Python批量获取学生期末考试成绩

    以下是我们学校对于期末考试成绩临时查询的一个网站 我突发奇想,可不可以通过爬虫的方式批量获取成绩信息 于是说干就干 首先观察网页的请求 通过查看,我们可以很明显看到网站查询是通过对https://wx ...

  2. javaScript 基础知识汇总 （十）

    1.New Function 语法:let func = new Function ([arg1[, arg2[, ...argN]],] functionBody) //无参数示例: let say ...

  3. iview mock main.js

    main.js // 实际打包时应该不引入mock /* eslint-disable */ // if (process.env.NODE_ENV !== 'production') require ...

  4. liunx 安装 zookeeper（转）

    转自:https://www.cnblogs.com/expiator/p/9853378.html linux安装zookeeper及使用 一.安装条件 想要安装zookeeper,必须先在linu ...

  5. IntelliJ IDEA 常用快捷键（转载）

    转自:http://www.open-open.com/lib/view/open1396578860887.html Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 ...

  6. python飞机大战简单实现

    小游戏飞机大战的简单代码实现: # 定义敌机类 class Enemy: def restart(self): # 重置敌机的位置和速度 self.x = random.randint(50, 400 ...

  7. 基于《仙剑奇侠传柔情版》利用Java的简单实现（一）

    基于<仙剑奇侠传柔情版>利用Java的简单实现(一) 2018-12-01 23:55:36   by Louis  一,新建一个类GameFrame.class,具体代码如下: pack ...

  8. hdu2544SPFA板题

    SPFA顾名思义就是更快的最短路算法,是Bellman ford算法的优化,SPFA的平均复杂度大约是O(K*|E|),在一般情况下K大约是小于等于2的数,但是总有人对你心怀不轨,构造一组SPFA最坏 ...

  9. 单调栈-Maximum Width Ramp

    2020-01-23 19:39:26 问题描述: 问题求解: public int maxWidthRamp(int[] A) { Stack<Integer> stack = new ...

  10. JSP+Servlet+C3P0+Mysql实现的azhuo商城

    项目简介 项目来源于:https://gitee.com/xuyizhuo/shopping 原仓库中缺失jar包及sql文件异常,现将修改过的源码上传到百度网盘上. 链接:https://pan.b ...