本文为大家分享了jquery ztree树插件的使用教程,供大家参考,具体内容如下
一、介绍
ztree 是一个依靠 jquery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 ztree 最大优点。
特点:
二、使用
(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" } ];
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
JavaScript 好题汇总分享(持续更新,看到好题就写)
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论