zTree入门实例(一眼就看会)
2024-08-25 22:09:23
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
最新文章
- spring帝国-开篇
- Oracle笔记1-数据库概念
- 逻辑操作符“&;&;”的三层理解
- CodeIgniter框架入门教程——第三课 URL及ajax
- Microsoft.ReportViewer.WebForms, Version=10.0.0.0的报错问题,解决方案
- C#之桶中取黑白球问题
- POJ 1062 昂贵的聘礼(Dijkstra)
- java jvm学习笔记五(实践自己写的类装载器)
- 【OC学习-12】什么是类的继承?为什么要继承?以及继承里面的注意事项
- 启程、对C的继承
- Bug等级判断标准
- ubuntu 1604安装docker-ce 记录
- union、union all 、distinct的区别和用途
- MD5+Salt值
- PHP ueditor编辑器使用(TP5)
- LCT摘要
- iOS 截屏分享(包含状态栏与不包含状态栏)
- [lr] 常用快捷键
- 网站app原型设计工具:axure,Mockups,墨刀
- Leetcode 82