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. 掌握R语言中的apply函数族（转）

    转自:http://blog.fens.me/r-apply/ 前言 刚开始接触R语言时,会听到各种的R语言使用技巧,其中最重要的一条就是不要用循环,效率特别低,要用向量计算代替循环计算. 那么,这是 ...

  2. java.lang.NoClassDefFoundError: org/springframework/web/context/WebApplicationContext

    一.NoClassDefFoundError与ClassNotFoundException NoClassDefFoundError错误的发生,是因为Java虚拟机在编译时能找到合适的类,而在运行时不 ...

  3. Fiddler抓包—搞定接口测试

    ·包的定义   在包交换网络里,单个消息被划分为多个数据块,这些数据块称为包,它包含发送者和接受者的地址信息.这些包然后沿着不同的路径在一个或多个网络中传输,并且在目的地重新组合.   ·应用   简 ...

  4. 4.1.3 Euclid's Game (POJ 2348)

    Problem description: 以辗转相除法为基础,给定两个整数a和b,Stan和Ollie轮流从较大的数字中减去较小数字的倍数(整倍数),并且相减后的结果不能为零.Stan先手,在自己的回 ...

  5. 『TensorFlow』第十一弹_队列&多线程&TFRecod文件_我辈当高歌

    TF数据读取队列机制详解 一.TFR文件多线程队列读写操作 TFRecod文件写入操作 import tensorflow as tf def _int64_feature(value): # val ...

  6. 第二阶段——个人工作总结DAY06

    1.昨天做了什么:昨天做完了修改密码的界面.(有点丑) 2.今天打算做什么:今天制作时间轴. 3.遇到的困难:无.

  7. UI基础三：简单的BOL报表开发

    巧了...刚好一个需求,就直接来撸起来吧. 需要做一个报表: 1.创建查询结构和结果结构 2.创建实施类: SE24创建ZCL_JPEXPORT_ORDER_IL 更改父类:CL_WCF_GENIL_ ...

  8. Notes for GGplot2: Getting started with ggplot2

    Alpha-ma 2016/10/7 1 Introduction of GGplot2 ggplot2 is an R package for producing statistical, or d ...

  9. Github 指令上手 --- 分支

    指令环境 Git Shell 1.创建一个新分支 git branch branchName 2.切换到新创建的分支 git checkout branchName 1.2合起来使用指令(创建并切换) ...

  10. 【Linux】shell学习之sed

    sed替换命令 使用该命令,可以将特定字符串或匹配的规则表达式用另一个字符串替换. sed 's/88/--/' filename 将filename每行第一次出现的88用字符串--替换,然后将该文件 ...