zTree 简单使用

最新推荐文章于 2022-05-07 09:25:59 发布

绝世好阿狸

最新推荐文章于 2022-05-07 09:25:59 发布

阅读量2.4k

点赞数

分类专栏： Struts2 spring mvc

本文链接：https://blog.csdn.net/u010900754/article/details/50828075

版权

spring mvc 同时被 2 个专栏收录

30 篇文章 5 订阅

订阅专栏

Struts2

16 篇文章 0 订阅

订阅专栏

zTree简单来说是一款处理树形结构的前端控件，下面总结一下它的简单使用。

1，下载相关文件。

从官网上，或者下面地址

https://github.com/zTree/zTree_v3

即可下载。解压后有如下图所示的文件：

页面中主要会用到css和js两个文件夹。

2，打开demo》》cn文件夹，新建test.html，这个文件的位置其实没有关系，这里只是为了引用css和js的方便，可以自行修改。

文件内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <head>
       <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>
   </head>
   <body>
	<p>wq
	</p>
<ul id="tree" class="ztree"></ul>

   </body>

  <SCRIPT LANGUAGE="JavaScript">
   var zTreeObj;
   // 使用数组array的方式，必须有这个设置
   var setting = {
	data: {
		simpleData: {
			enable: true,
			idKey: "id",
			pIdKey: "pId",
			rootPId: 0
		}
	}
};
//数组array
var nodes = [
	{name: "父节点1", children: [
		{name: "子节点1"},
		{name: "子节点2"}
	]},
	{name: "父节点2", children: [
		{name: "子节点21"},
		{name: "子节点22"}
	]}
];
   // 标准格式
   var zNodes =  [
    {"id":1, "pId":0, "name":"test1"},
    {"id":11, "pId":1, "name":"test11"},
    {"id":12, "pId":1, "name":"test12"},
    {"id":111, "pId":11, "name":"test111"}
];
   $(document).ready(function(){
      zTreeObj = $.fn.zTree.init($("#tree"), setting, nodes);
   });
  </SCRIPT>
</HTML>

主要注意：

（1）页面的声明方式；

（2）head中对于css以及js的引用。

（3）body中用一个ul标签来承载tree。

（4）js代码中用init函数初始化tree。这个初始化函数会将创建好的tree对象返回，这样以后就可以对树增删改了。setting变量是tree的配置信息，树节点的信息也是以json格式存放的，然后在init函数中传入。值得一提的是树节点的信息可以以两种方式给出，一种是标准的格式，如nodes变量，也可以是简单格式的，如zNodes变量，显然后者的维护量要更小，但是如果要使用简单格式的方式，那就必须在setting中配置simpleData，上面也给出了。

这是一个入门级别的小例子，后续更加复杂的功能可以在这个基础上添加，具体的配置需要参照官网的api。

绝世好阿狸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
zTree 简单使用

zTree简单来说是一款处理树形结构的前端控件，下面总结一下它的简单使用。1，下载相关文件。从官网上，或者下面地址https://github.com/zTree/zTree_v3即可下载。解压后有如下图所示的文件：页面中主要会用到css和js两个文件夹。2，打开demo》》cn文件夹，新建test.html，这个文件的位置其实没有关系，这里只是为了引用css和js的方便，
复制链接

扫一扫