jQuery zTree树插件的使用教程
程序员文章站
2023-11-28 19:42:34
本文为大家分享了jquery ztree树插件的使用教程，供大家参考，具体内容如下
一、介绍
ztree 是一个依靠 jquery 实现的多功能 “树插件”。优异的性能...
本文为大家分享了jquery ztree树插件的使用教程，供大家参考，具体内容如下
一、介绍
ztree 是一个依靠 jquery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 ztree 最大优点。
特点：
- ztree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
- 采用了 延迟加载 技术，上万节点轻松加载，即使在 ie6 下也能基本做到秒杀
- 兼容 ie、firefox、chrome、opera、safari 等浏览器
- 支持 json 数据
- 支持静态 和 ajax 异步加载节点数据
- 支持任意更换皮肤 / 自定义图标（依靠css）
- 支持极其灵活的 checkbox 或 radio 选择功能
- 提供多种事件响应回调
- 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
- 在一个页面内可同时生成多个 tree 实例
- 简单的参数配置实现 灵活多变的功能
二、使用
（1）引入ztree组件
注意：需要添加jquery依赖
<link href="static/jquery-ztree/3.5.36/css/ztreestyle/ztreestyle.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script> <script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>
（2）向body中添加div
<div> <div id="treedemo" class="ztree"> </div> </div>
（3）添加ztree设置
<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);
ztreeobj.expandall(true);//展开树
</script>
（4）页面效果
（5）项目截图及html代码
html页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ztree测试页面</title>
<link href="static/jquery-ztree/3.5.36/css/ztreestyle/ztreestyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="static/jquery/3.3.1/jquery-3.3.1.min.js"></script>
<script src="static/jquery-ztree/3.5.36/js/jquery.ztree.all.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<div id="treedemo" class="ztree">
</div>
</div>
<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>
</body>
</html>
三、一些方法
（1）设置展开树
$(document).ready(function() {
ztreeobj = $.fn.ztree.init($("#ztree"), setting, znodes);
//展开所以节点
//ztreeobj.expandall(true);
//展开第一级数节点
var nodes = ztreeobj.getnodesbyparam("level", 0);
for(var i = 0; i < nodes.length; i++) {
ztreeobj.expandnode(nodes[i], true, false, false);
}
});
四、setting 配置详解
一些比较常用的配置
（一）check
1、enable: true
设置 ztree 的节点上是否显示 checkbox / radio
默认值: false
（二）view
selectedmulti: false 设置是否允许同时选中多个节点。默认是true
（三）data
simpledata: { enable: true, idkey: 'id', pidkey: 'pid', rootpid: '0' }
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" }
];
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 移动互联网不待见搜索引擎的背后原因