Jquery树插件zTree学习总结

zTree简介：

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

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

入门指南：

1. 下载zTee，页面引入jquery.js，根据功能需求添加zTree相应的js和css

jquery.ztree.core-3.5.js：zTree核心包
jquery.ztree.excheck-3.5.js：复选框功能包
jquery.ztree.exedit-3.5.js：编辑功能包

zTree核心包是必须引入的。

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
  <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;
   // 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>
 </HEAD>
<BODY>
<div>
   <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>

注意:

1) "<!DOCTYPE html>" 是必需的！

2) zTree 的容器 className 别忘了设置为 "ztree"

setting

var setting = {  
        async : true, //需要采用异步方式获取子节点数据,默认false  
        asyncUrl : root + url, //当 async = true 时，设置异步获取节点的 URL 地址 ,允许接收 function 的引用  
        asyncParam : ["id"], //提交的与节点数据相关的必需参数  
        isSimpleData : true, //数据是否采用简单 Array 格式，默认false  
        treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性  
        treeNodeParentKey : "parentId", //在isSimpleData格式下，当前节点的父节点id属性  
        nameCol : "privName",            //在isSimpleData格式下，当前节点名称  
        expandSpeed : "fast", //设置 zTree节点展开、折叠时的动画速度或取消动画(三种默认定义："slow", "normal", "fast")或 表示动画时长的毫秒数值(如：1000)   
        showLine : true, //是否显示节点间的连线  
        callback : { //回调函数  
            rightClick : zTreeOnRightClick   //右键事件  
        }  
    };

zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置

zTreeNodes

zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息

zTreeNodes的格式分为两种：利用Json格式嵌套体现父子关系和Array简单格式

①带有父子关系的标准 zTreeNodes 举例:

Js代码  收藏代码
var zTreeNodes = [   
    {"id":1, "name":"test1", "nodes":[   
      {"id":11, "name":"test11", "nodes":[   
        {"id":111, "name":"test111"}   
      ]},   
      {"id":12, "name":"test12"}   
    ]},   
    ......   
];   
②带有父子关系的简单 Array 格式(isSimpleData)的 zTreeNodes 举例：

Js代码  收藏代码
var treeNodes = [                                                                         
    {"id":1, "pId":0, "name":"test1"},   
    {"id":11, "pId":1, "name":"test11"},   
    {"id":12, "pId":1, "name":"test12"},   
    {"id":111, "pId":11, "name":"test111"},   
    ......   
];

更多实例可以参看zTree中文文档

Jquery树插件zTree学习总结

zTree简介：

setting

zTreeNodes

猜你喜欢