jQuery树形控件zTree使用小结

作者：Fonour 字体：[增加减小] 来源：互联网

Fonour 通过本文主要向大家介绍了jQuery,树形控件,zTree等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

0 zTree简介

树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

0.0 zTree的特点
•最新版的zTree将核心代码按照功能进行了分割，不需要的代码可以不用加载，如普通使用只需要加载核心的jquery.ztree.core-3.5.js，需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js，需要使用编辑功能加载jquery.ztree.exedit-3.5.min.js
•采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
•兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
•支持 JSON 数据
•支持静态和 Ajax 异步加载节点数据
•支持任意更换皮肤 / 自定义图标（依靠css）
•支持极其灵活的 checkbox 或 radio 选择功能
•提供多种事件响应回调
•灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽
•在一个页面内可同时生成多个 Tree 实例
•简单的参数配置实现，灵活多变的功能

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: "application/json", //定义ajax提交参数的参数类型，一般为json格式
  url: "/Design/Get",  //定义数据请求路径
  autoParam: ["id=id", "name=name"] //定义提交时参数的名称，=号前面标识节点属性，后面标识提交时json数据中参数的名称
  }
 };

需要注意的是，zTree的事件回调部分，基本上每一个事件都对应一个beforeXXX事件，比如onClick事件对应有一个beforeOnClick事件，主要用于控制相关事件是否允许执行，如果before事件返回false，则取消执行对应相关事件。

1.2 zTree的数据格式
zTree的每一个节点都是一个treeNode对象，treeNode对象经常用到的属性和方法如下：

treeNode: {
  name, //节点显示的文本
  checked, //节点是否勾选，ztree配置启用复选框时有效
  open, //节点是否展开
  icon, //节点的图标
  iconOpen, //节点展开式的图标
  iconClose, //节点折叠时的图标
  id,  //节点的标识属性，对应的是启用简单数据格式时idKey对应的属性名，并不一定是id,如果setting中定义的idKey:"zId",那么此处就是zId
  pId, //节点parentId属性，命名规则同id
  children, //得到该节点所有孩子节点，直接下级，若要得到所有下属层级节点，需要自己写递归得到
  isParent, //判断该节点是否是父节点，一般应用中通常需要判断只有叶子节点才能进行相关操作，或者删除时判断下面是有子节点时经常用到。
  getPath() //得到该节点的路径，即所有父节点，包括自己，此方法返回的是一个数组，通常用于创建类似面包屑导航的东西A-->B-->C 
  }

zTree的数据源一般有标准数据格式、简单数据格式两种，标准数据格式通过指定节点的chidren属性构建层级关系，而简单数据格式根据根据id，pid属性构建层级关系，我们在应用开发中使用关系型数据库，一般采用的都是简单数据格式。
标准数据格式

 var nodes = [
 {name: "父节点1", children: [
 {name: "子节点1"},
 {name: "子节点2"}
 ]}
];

简单数据格式

 var nodes = [
 {id:1, pId:0, name: "父节点1"},
 {id:11, pId:1, name: "子节点1"},
 {id:12, pId:1, name: "子节点2"}
];

注意zTree的默认配置是不启用简单数据格式，使用简单数据格式一定要在setting中进行简单数据格式的相关配置。

1.3 zTree的常用方法
zTree的主要操作方法介绍如下
获取zTree对象：var treeObj = $.fn.zTree.getZTreeObj("tree");
增加节点：addNodes(parentNode,index,newNodes,isSlient)

parentNode:指定的父节点，如果增加根节点，请设置 parentNode 为 null 即可

index:新节点插入的位置（从 0 开始），index = -1 时，插入到最后，此参数可忽略

newNodes：需要增加的节点数据 JSON 对象集合，数据只需要满足 zTree 的节点数据必需的属性即可

isSilent：true 时，添加节点后不展开父节点，其他值或缺省状态都自动展开

勾选或取消勾选全部节点：checkAllNodes(checked);
checked参数为true时全部勾选，为false时全部取消勾选。
勾选或取消勾选单个节点：checkNode(node, checked, checkedTypeFlag，callbackFlag);
node：要进行操作的节点
checked：为true

分享到：QQ空间新浪微博腾讯微博微信百度贴吧 QQ好友复制网址打印

jQuery树形控件zTree使用小结

您可能想查找下面的文章:

相关文章

文章分类

最近更新的内容