jQuery树形控件zTree使用小结

最新推荐文章于 2024-05-30 09:54:20 发布

小七的玩偶

最新推荐文章于 2024-05-30 09:54:20 发布

阅读量620

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/babyxue/article/details/74570667

版权

本文总结了jQuery插件zTree的使用，包括文件结构、基本配置、数据格式、常用方法和操作。zTree的配置涉及view、data、check、callback和async等方面，数据源有标准和简单格式。文章还探讨了节点操作、事件回调，如节点点击、复选框事件，并提供了右键菜单的实现示例，强调了在大数据量时优化性能的重要性。

摘要由CSDN通过智能技术生成

0.1 zTree文件介绍
从zTree官网下载的zTree包括以下组成部分

•metroStyle文件夹：zTree的metro风格样式相关文件（图片及css样式表）。
•zTreeStyle文件夹：zTree的标准风格样式文件夹（图片及css样式表）
•js文件：zTree.all.js是完整的js库，可单纯加载此文件实现所有zTree功能，ztree.core、ztree.excheck、ztree.exedit、ztree.exhide是对ztree按照功能进行的分割，分别对应基本功能、复选功能、编辑功能、显隐功能。

1 zTree的基本使用

1.0 zTree的创建
在页面中添加对zTree的js及css引用，由于zTree基于JQuery，JQuery的引用是必须的。

<!DOCTYPE html>
<HTML>
<HEAD>
 <TITLE> ZTREE DEMO </TITLE>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
 <script type="text/javascript" src="jquery-1.4.2.js"></script>
 <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
 <SCRIPT LANGUAGE="JavaScript">
  var zTreeObj;
  var setting = {};  // zTree 的参数配置，后面详解
   var zNodes = [   // zTree 的数据属性，此处使用标准json格式
   {
   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); //初始化zTree，三个参数一次分别是容器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源
  });
 </SCRIPT>
</HEAD>
<BODY>
 <div>
  <ul id="treeDemo" class="ztree"></ul> 
 </div>
</BODY>
</HTML>

1.1 zTree的配置
zTree的配置采用Json格式，按照配置的类型分为view（可视界面相关配置）、data（数据相关配置）、check（复选框相关配置）、callback（各类事件的回调函数配置）、async（zTree异步加载配置），一下是我们经常会使用到的一些配置及说明，其他详细配置可以参考zTree官方API文档的详细介绍。

var setting = {
   view: {
    selectedMulti: true, //设置是否能够同时选中多个节点
    showIcon: true,  //设置是否显示节点图标
    showLine: true,  //设置是否显示节点与节点之间的连线
    showTitle: true,  //设置是否显示节点的title提示信息
   },
   data: {
     simpleData: {
     enable: false, //设置是否启用简单数据格式（zTree支持标准数据格式跟简单数据格式，上面例子中是标准数据格式）
      idKey: "id",  //设置启用简单数据格式时id对应的属性名称
      pidKey: "pId" //设置启用简单数据格式时parentId对应的属性名称,ztree根据id及pid层级关系构建树结构
    }
   },
   check:{
    enable: true   //设置是否显示checkbox复选框
   },
   callback: {
    onClick: onClick,    //定义节点单击事件回调函数
    onRightClick: OnRightClick, //定义节点右键单击事件回调函数
    beforeRename: beforeRename, //定义节点重新编辑成功前回调函数，一般用于节点编辑时判断输入的节点名称是否合法
    onDblClick: onDblClick,  //定义节点双击事件回调函数
    onCheck: onCheck    //定义节点复选框选中或取消选中事件的回调函数
   },
   async: {
    enable: true,      //设置启用异步加载
    type: "get",      //异步加载类型:post和get
    contentType: "

最低0.47元/天解锁文章

小七的玩偶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery树形控件zTree使用小结

0.1 zTree文件介绍从zTree官网下载的zTree包括以下组成部分 •metroStyle文件夹：zTree的metro风格样式相关文件（图片及css样式表）。•zTreeStyle文件夹：zTree的标准风格样式文件夹（图片及css样式表）•js文件：zTree.all.js是完整的js库，可单纯加载此文件实现所有zTree功能，ztree.core、ztree.e
复制链接

扫一扫

专栏目录