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. 如何在vue中修改动态标签中的样式和修改组件库样式

    vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...

  2. gulp常用的插件

    参考地址: http://www.cnblogs.com/1wen/p/5421212.html https://my.oschina.net/wolfx/blog/673905 http://www ...

  3. JS实现滚动区域触底事件

    效果 贴上效果展示: 实现思路 样式方面不多赘述,滚动区域是给固定高度,设置 overflow-y: auto 来实现. 接下来看看js方面的实现,其实也很简单,触发的条件是: 可视高度 + 滚动距离 ...

  4. Openstack计算Nova组件

    欢迎来到虚拟机的世界,如果我们将Openstack环境里运行在各个无力节点上的各种服务看座生命体,而不是死的指令集合,那么就是一个虚拟机的世界. Openstack的计算组件,也就是Nova项目实现了 ...

  5. 蓝桥杯vip 字符串对比

    蓝桥杯vip 字符串对比 题目如下 给定两个仅由大写字母或小写字母组成的字符串(长度介于1到10之间),它们之间的关系是以下4中情况之一: 1:两个字符串长度不等.比如 Beijing 和 Hebei ...

  6. win7系统下的Nodejs开发环境配置

    此处不推荐使用msi安装包直接安装nodejs,我们应该知道它里面做了哪些事情,这样以后出问题的时候,可以更快速地定位问题点.另一方面,直接安装的情况,以后更新了版本的话会很麻烦,因为如果我们想体验新 ...

  7. Qt 的信号与槽(纯干货)

    接触Qt断断续续有些时间了,总看了一堆的文章说信号槽的概念,心里就想骂人,做为一个初学者,最重要的就是怎么写代码,写代码写多了,再去看理论,有时水到渠成的就明白那些理论了.但所有讲信号槽的都把一堆信号 ...

  8. ML Lecture 0-2: Why we need to learn machine learning?

    在Github上也po了这个系列学习笔记(MachineLearningCourseNote),觉得写的不错的小伙伴欢迎来给项目点个赞哦~~ ML Lecture 0-2: Why we need t ...

  9. Kullback-Leibler(KL)散度介绍

    在这篇文章中,我们将探讨一种比较两个概率分布的方法,称为Kullback-Leibler散度(通常简称为KL散度).通常在概率和统计中,我们会用更简单的近似分布来代替观察到的数据或复杂的分布.KL散度 ...

  10. 使用Python创建自己的Instagram滤镜

    不知道你有没有使用过Instagram滤镜,它们非常方便,只需单击几个按钮,就可以变换我要发布的照片​​. 你是否想过自己可以创建一个?答案是可以的! 在本文中,我将向你展示如何使用代码和示例图像来创 ...