JavaScript

超轻量级php框架startmvc

jQuery zTree树插件的使用教程

更新时间:2020-09-07 20:18:01 作者:startmvc
本文为大家分享了jQueryzTree树插件的使用教程,供大家参考,具体内容如下一、介绍zTree是

本文为大家分享了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" }
 ];

效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

jQuery zTree 树插件