zTree – jQuery 树插件
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
可以做出来如下效果:
一 使用前准备工作
1 下载JQuery插件
http://www.jq22/jquery-info122
(要1.4版本以上的)
2 下载zTree插件
官网地址:http://www.treejs/v3/main.php#_zTreeInfo
二 导入到开发工具
我这里使用的是IDEA
首先创建一个WEB项目,引入jQuery和zTree(下载下来的压缩包解压后放进项目即可)
三 在html导入资源文件
<head>
<meta charset="UTF-8">
<title>zTreeDemo</title>
<!--引入jqurey-->
<script type="text/javascript" src="jquery/jquery-3.4.1.min.js"></script>
<!--引入ztree-->
<link rel="stylesheet" type="text/css" href="ztree/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="ztree/js/jquery.ztree.all.min.js"></script>
</head>
四 创建zTree容器
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
五 初始化ztree
<body>
<!--创建ztree容器-->
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<!--初始化ztree-->
<script>
var setting = { };
var zNodes =[
{ name:"父节点1 - 展开", open:true,
children: [
{ name:"父节点11 - 折叠",
children: [
{ name:"叶子节点111"},
{ name:"叶子节点112"},
{ name:"叶子节点113"},
{ name:"叶子节点114"}
]},
{ name:"父节点12 - 折叠",
children: [
{ name:"叶子节点121"},
{ name:"叶子节点122"},
{ name:"叶子节点123"},
{ name:"叶子节点124"}
]},
{ name:"父节点13 - 没有子节点", isParent:true}
]},
{ name:"父节点2 - 折叠",
children: [
{ name:"父节点21 - 展开", open:true,
children: [
{ name:"叶子节点211"},
{ name:"叶子节点212"},
{ name:"叶子节点213"},
{ name:"叶子节点214"}
]},
{ name:"父节点22 - 折叠",
children: [
{ name:"叶子节点221"},
{ name:"叶子节点222"},
{ name:"叶子节点223"},
{ name:"叶子节点224"}
]},
{ name:"父节点23 - 折叠",
children: [
{ name:"叶子节点231"},
{ name:"叶子节点232"},
{ name:"叶子节点233"},
{ name:"叶子节点234"}
]}
]},
{ name:"父节点3 - 没有子节点", isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//第一个参数为zTree的DOM容器,第二个为zTree设置详情可见官网api,第三个为zTree的节点数据
x
</script>
</body>
*setting配置
setting为树结构的配置
- 普通使用,无必须设置的参数
- 与显示相关的内容请参考 API 文档中 setting.view 内的配置信息
- name、children、title 等属性定义更改请参考 API 文档中 setting.data.key 内的配置信息
更多推荐
zTree学习笔记1---zTree从零搭建(新手基础教程)
发布评论