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. mysql数据库设计文档-导出字段设计

    navicat 是我一直在使用的一个数据库操作工具,非常方便快捷.如果没有可用navicat可以留言邮箱我直接发您. 今天来介绍一下使用navicat导出数据库字段设计.废话不多说,先看导出效果. 查 ...

  2. 微商贴吧企业新浪微博怎么找客户_怎么做好seo

    写的几篇文章对于seo的引流量方面的 怎么做好网络seo优化之SEO项目团队组建 品牌营销_中小企业网络推广的办法 微商怎么引流客源?微商没有客户的解决办法?下 微商怎么引流客源?微商没有客户的解决办 ...

  3. 保姆级教程！手把手教你使用Longhorn管理云原生分布式SQL数据库！

    作者简介 Jimmy Guerrero,在开发者关系团队和开源社区拥有20多年的经验.他目前领导YugabyteDB的社区和市场团队. 本文来自Rancher Labs Longhorn是Kubern ...

  4. Swift 4.0 字典(Dictionary)学习

    定义字典常量(常量只有读操作) let dictionary1 = ["key1": 888, "key2": 999] let dictionary2: [S ...

  5. Error: java.net.ConnectException: Call From tuge1/192.168.40.100 to tuge2:8032 failed on connection exception

    先看解决方案,再看唠嗑,唠嗑可以忽略. 解决方案: 使用start yarn.sh启动yarn就可以了. 唠嗑: 今天学习Spark基于Yarn部署.然后总以为Yarn是让Spark启动的,提交程序的 ...

  6. hdu2642二维树状数组，单点修改+区间查询

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/2642/ 代码如下: #include<bits/stdc++.h> using namespace ...

  7. 题解 SP2916 【GSS5 - Can you answer these queries V】

    前言 最近沉迷于数据结构,感觉数据结构很有意思. 正文 分析 先来分类讨论一下 1. \(x2<y1\) 如果 \(y1<x2\) 的话,答案 \(=\max \limits_{ y1 \ ...

  8. 动态规划-TSP问题-最短超级串

    2020-03-03 22:55:08 问题描述: 给定一个字符串数组 A,找到以 A 中每个字符串作为子字符串的最短字符串. 我们可以假设 A 中没有字符串是 A 中另一个字符串的子字符串. 示例 ...

  9. Python第六章-函数01-函数的概念和使用

    函数 为了便于程序的维护和更好的实现模块化,好的程序都会分解为很多函数. 可以这么说,对于任何的编程语言,函数都是一个非常重要的概念. python 不仅简化了函数的定义过程,而且还大量借鉴了其他函数 ...

  10. 一些js 概念 整理

    1.原型链 prototype       这个属性 是一个指针,指向一个对象 这个对象 包含 所有实例共享的属性和方法,即这个原型对象是用来给实例共享属性和方法的.          而每个实例内部 ...