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. Hadoop集群搭建(一)~虚拟机的创建

    Hadoop集群的搭建包括,虚拟机系统的安装:安装JDK,Hadoop:克隆虚拟机:伪分布式的搭建:安装zookeeper:Hive:Hbae:Spark等等: 我将分为多篇文章来记录.这篇文章主要写 ...

  2. [BJDCTF 2nd]old-hack

    进入首页: 首页告诉了我们是thinkphp5的漏洞. 知道了是哪个版本的话就搜一搜喽:最后发现是thinkphp5.0.23的命令执行 payload_1:查看根目录文件,发现flag位置 http ...

  3. F-NAScan：一款网络资产扫描工具

    此脚本的大概流程为: ICMP存活探测-->端口开放探测-->端口指纹服务识别-->提取快照(若为WEB)-->生成结果报表 用法 python NAScan.py -h 10 ...

  4. Oracle连接别人数据库

    方法一:在开始菜单中,找到oracle11g-应用程序开发-SQL PLUS.双击SQL PLUS. 弹出的SQL Plus框中,输入数据库实例的用户名和密码,按enter键. 如果oracle服务器 ...

  5. 贪心-谷歌-857. 雇佣 K 名工人的最低成本

    2020-03-15 22:00:39 问题描述: 有 N 名工人. 第 i 名工人的工作质量为 quality[i] ,其最低期望工资为 wage[i] . 现在我们想雇佣 K 名工人组成一个工资组 ...

  6. vim-1-window,buffer and tab

    Summary:A buffer is the in-memory text of a file. A window is a viewport on a buffer. A tab page is ...

  7. WEB应用之httpd基础入门（五）

    前文我们聊到了httpd的启动用户和相关权限的说明,资源压缩配置.https的实现,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12593675.html:今 ...

  8. 使用室内三维地图引擎ESMap来管理摄像头设备、消防设备和人员轨迹展示

    目前室内三维地图如何轻量化,能够在手机微信.电脑浏览器等平台快速显示地图,显示的地图性能好,转动地图不卡是大家都要面对的问题, 使用室内三维地图引擎ESMap后目前可以不用操心这方面的问题,开发只需要 ...

  9. re模块——正则表达式

    import re re.findall('\w','abc123_8()-=') \w:字母数字下划线 \W:非数字字母下划线 \s:空白字符 \S:非空字符 \d:整数数字 \D:非整数数字 \A ...

  10. 本机安装oracle12C

    1.先安装的oracle12C,创建了oracle主目录用户admin,其中主目录用户为admin,口令为123456. 2.其次创建监听,再创建数据库实例. 3.全局数据库名称为orcl.lan,管 ...