jQuery zTree树插件的使用教程

2019-11-19 11:01:27

字体：大中小

来源：转载

供稿：网友

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

效果：