zTree 是一个依靠 jQuery 实现的多功能 “树插件”。

下载地址:https://gitee.com/zTree/zTree_v3

待会将上面划的三个文件复制到Java的Web工程下即可

先看实现效果:

1、Eclipse中新建Web工程

2、将上面划的三个文件复制到工程的WebContent目录下,并在WebContent下新建test.html文件

3. test.html完整内容如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title> <link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>
<script LANGUAGE="JavaScript">
var zTreeObj;
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {};
// zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
var zNodes = [
{name:"test1", open:true, children:[
{name:"test1_1"}, {name:"test1_2"}]},
{name:"test2", open:true, children:[
{name:"test2_1"}, {name:"test2_2"}]}
];
$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
}); </script> </head> <body> <div>
<ul id="treeDemo" class="ztree"></ul>
</div> </body>
</html>

  

4. 启动工程即可看到:

zTree参考和下载网址:http://www.treejs.cn/v3/main.php#_zTreeInfo

zTree入门实例(一眼就看会)的更多相关文章

  1. .net core kafka 入门实例 一篇看懂

      kafka 相信都有听说过,不管有没有用过,在江湖上可以说是大名鼎鼎,就像天龙八部里的乔峰.国际惯例,先介绍生平事迹   简介 Kafka 是由 Apache软件基金会 开发的一个开源流处理平台, ...

  2. 10个python爬虫入门实例

    昨天和伙伴萌一块学习,写了几个简单的入门实例 涉及主要知识点: web是如何交互的 requests库的get.post函数的应用 response对象的相关函数,属性 python文件的打开,保存 ...

  3. Vue.js2.0从入门到放弃---入门实例

    最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用 ...

  4. Omnet++ 4.0 入门实例教程

    http://blog.sina.com.cn/s/blog_8a2bb17d01018npf.html 在网上找到的一个讲解omnet++的实例, 是4.0下面实现的. 我在4.2上试了试,可以用. ...

  5. Spring中IoC的入门实例

    Spring中IoC的入门实例 Spring的模块化是很强的,各个功能模块都是独立的,我们可以选择的使用.这一章先从Spring的IoC开始.所谓IoC就是一个用XML来定义生成对象的模式,我们看看如 ...

  6. zTree应用实例详讲(3)

    zTree应用实例详讲(3) 上一讲中,已经讲到了重命名与删除.那么这一讲,我们来做新建文件夹. 其实新建是非常简单的,想一下我们想要的效果:点击新建,然后在一个节点下面出现一个新建的文件夹,并且与此 ...

  7. zTree应用实例详讲

    zTree应用实例详讲(1) 因为项目的需要,要创建一棵动态的文件树,此树除了实现异步获取子节点外,还要实现对树节点的增.删.改.查.移动.重命名.批量删除.批量移动. 每一个操作都要和数据库打交道. ...

  8. EF6CodeFirst+MVC5+Autofac泛型注册 入门实例

    贴一个EF6 CodeFirst模式结合MVC5和Autofac(泛型注册)的一个入门实例 网上类似的例子实在太少,最近自己也有用到这一块的知识,总结了一下,不要让后人踩了自己踩过的坑. 1:新建三个 ...

  9. 【React】入门实例

    React 可以灵活的应用在各种各样的项目中.你可以用它来创建新的应用程序,你也可以逐步引用而不改变现有的代码库. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaS ...

随机推荐

  1. qrcode render 二维码扫描读取

    著名的 qrcode 是 zxing https://github.com/zxing/zxing 基于 java, java 真的是轮子多啊... zxing 的 javascript 版本是 ht ...

  2. 编写脚本,出现 TypeError: exceptions must be old-style classes or derived from BaseException, not unicode怎样解决?

    小编使用robot framework,在编写安卓自动化脚本时,出现这样的情况: 在网上搜了好久,发现都是python的解决方法,到底怎样解决robot里面的问题呢?最终发现: (1)代码中我是这样写 ...

  3. FreeRTOS

    一.内核配置 1.configUSE_PREEMPTION 设置为1,使用抢先式内核:设置为0,为合作轮转内核. 2.configCPU_CLOCK_HZ 内部处理器执行的频率.这个值需要正确配置外围 ...

  4. Python学习笔记之参数解析

    python提供了两种方法进行命令行的参数解析,分别是getopt和optparse类中的模块OptionParser,下面分别详细了解这两个模块: 1.getopt模块 首先复习C语言的命令行解析: ...

  5. Spring Boot 之注解@Component @ConfigurationProperties(prefix = "sms") 使用@ConfigurationProperties读取yml配置

    从spring-boot开始,已经支持yml文件形式的配置,@ConfigurationProperties的大致作用就是通过它可以把properties或者yml配置直接转成对象 @Componen ...

  6. spring: beanutils.copyproperties将一个对象的数据塞入到另一个对象中(合并对象)

    spring: beanutils.copyproperties将一个对象的数据塞入到另一个对象中(合并对象) 它的出现原因: BeanUtils提供对Java反射和自省API的包装.其主要目的是利用 ...

  7. 协方差分析 | ANCOVA (Analysis of Covariance)

    If you are worried about leaving out covariates you could regress out them first and analyse the res ...

  8. 正睿 2018 提高组十连测 Day2 T2 B

    题目链接 http://www.zhengruioi.com/contest/84/problem/318 题解写的比较清楚,直接扒过来了. B 算法 1 直接按题意枚举,动态规划或是记忆化搜索. 时 ...

  9. 【洛谷p1507】NASA的食物计划

    (一次a……) NASA的食物计划[传送门] 好的上算法标签: 嗯这是个二维背包 (万年不变分隔线) 二维的题就是在一维基础上增加了一个条件,这个背包不仅含有质量还有体积.所以我们增加一层循环.核心算 ...

  10. 【洛谷p1060】开心的金明

    (DP背包第一题,值得记录思路呀) 开心的金明[传送门] 洛谷算法标签: 01背包问题的思路分析见[总结]01背包问题 这道题显然是典型的01背包问题,首先我们显然可以由输入的第i个物体的价格v[i] ...