zoukankan      html  css  js  c++  java
  • 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中文文档 

     

  • 相关阅读:
    前端插件资源
    wPaint在线绘图插件
    【剑指offer】数字数组中只出现一次(2)
    系统,特别是慢查找
    Asp.Netserver控制发展Grid实现(一个)UI转让
    JAVA连接ACCESS、MYSQL、SQLSEVER、ORACLE数据库
    u_boot启动过程中的具体分析(1)
    免费是移动互联网的第一个念头
    进入公司第五届、六个月
    Windows平台Oracle使用USE_SHARED_SOCKET角色
  • 原文地址:https://www.cnblogs.com/--cainiao/p/10441870.html
Copyright © 2011-2022 走看看