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. 最新省市区数据，sql插入语句

    --省数据 insert into Province (ProvinceName)  values('北京市'); insert into Province (ProvinceName)  value ...

  2. Java将byte[]和int的互相转换

    /** * 将整数转换为byte数组并指定长度 * @param a 整数 * @param length 指定长度 * @return */ public static byte[] intToBy ...

  3. spring cloud: Hystrix（三）：健康指数 health Indicator

    spring cloud: Hystrix(三):健康指数 health Indicator ribbon+hystrix 当使用Hystrix时(spring-cloud-starter-hystr ...

  4. 雷林鹏分享：XML 编辑器

    XML 编辑器 如果您希望极认真地学习和使用 XML,那么您一定会从一款专业的 XML 编辑器的使用上受益. XML 是基于文本的 XML 是基于文本的标记语言. 关于 XML 的一件很重要的事情是, ...

  5. find_first_zero_bit在使用gcc 4.2.4 编译时，需要保护%eax

    1.3.100 find_first_zero_bit在使用gcc 4.2.4 编译时,需要保护%eax find_first_zero_bit 修订后: /* * Find-bit routines ...

  6. 使用jquery.mobile和WebSQL实现记事本功能

    1.记事本列表页 1.1.页面结构与样式: <div data-role="page" id="home"> <div data-role=& ...

  7. hdu-2421 Deciphering Password 数学姿势

    给定A,B,对于A^B的每一个因子,M为其因子的因子数的三次方求和. 容易推导得出A^B的每一个因子都是A的质因子的组合(质因子可重复利用),其因子数自然等于所使用的每个质因子的数量乘积. 假设A由质 ...

  8. HDOJ-1156 Brownie Points II 线段树/树状数组（模板）

    http://acm.hdu.edu.cn/showproblem.php?pid=1156 在一张二位坐标系中,给定n个点的坐标,玩一个划线游戏(线必须穿过点),Stan先手画一条垂直的线,然后Ol ...

  9. 架构探险笔记3-搭建轻量级Java web框架

    MVC(Model-View-Controller,模型-视图-控制器)是一种常见的设计模式,可以使用这个模式将应用程序进行解耦. 上一章我们使用Servlet来充当MVC模式中的Controller ...

  10. 【转】XP系统远程桌面连接2012R2提示：远程计算机需要网络级别身份验证，而您的计算机不支持该验证

    一.背景 因对方客户的服务器是内网的,需要操作更新服务器的数据库表信息,因此远程对方客户办公司的电脑远程服务器:但是在远程桌面连接出现问题. 二.错误问题 错误问题:“远程计算机需要网络级别身份验证, ...