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

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="../../css/demo.css" />

     <link rel="stylesheet" type="text/css" href="../../css/zTreeStyle/zTreeStyle.css"/>

     <script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>

     <script type="text/javascript" src="../../js/jquery.ztree.core-3.5.js"></script>

 </head>

     <script type="text/javascript">

     var zTreeObj;

     //zTree的参数配置

     var setting={

         view: {

             autoCancelSelected: true,//点击节点时,按下Ctrl或Cmd键是否允许取消选择操作

             dblClickExpand: dblClickExpand,//双击节点时，是否自动展开父节点的标识

             expandSpeed: "slow",//节点展开关闭的时候的速度

             fontCss: setFontCss,//个性化文字样式,只针对zTree在节点上显示的<A>对象

             selectedMulti: true,//允许是否同时选中多个节点

             showIcon:true,//设置是否显示节点的图标

             showLine:true,//是否显示节点之间的连线

             showTitle:showTitleForTree,//是否显示节点的title提示信息 showTitle: false不提示信息

             txtSelectedEnable: true//设置zTree是否允许可以选择zTree DOM内的文本

         },

         data: {

             simpleData: {

                 enable: true,

                 idKey: "id",

                 pIdKey: "pId",

                 rootPId: 0

         }

     }

     };

     //zTree的数据属性

     var zNodes=[

     {name:"test1",open:true,

         children:[{name:"test1_1"},{name:"test1_2"}]

     },

     {name:"test2",open:true,

         children:[{name:"test2_1"},{name:"test2_2"}]

     },

     {name:"test3",open:true,

         children:[{name:"test3_1"},{name:"test3_2"}]}

     ];

     //设置zTree仅仅level=0的父节点取消双击展开的功能

     function dblClickExpand(treeId, treeNode) {

     return treeNode.level == 0;

     };

     //设置zTree仅仅level=1的节点不显示提示信息

     function showTitleForTree(treeId, treeNode) {

         return treeNode.level != 1;

     };

     //设置level=0的节点name显示为红色

     function setFontCss(treeId, treeNode) {

         return treeNode.level == 0 ? {color:"red"} : {color:"green"};

     };

     $(document).ready(function(){

         zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);

     });

     </script>

 <body>

     <div>

         <ul id="tree" class="ztree"></ul>

     </div>

 </body>

 </html>

zTree基本功能[core]的更多相关文章

  1. 自写 zTree搜索功能 -- 关键字查询 -- 递归无限层

    唠叨一哈 前两天朋友跟我说要一个ztree的搜索功能,我劈头就是一巴掌:这种方法难道无数前辈还做少了?自己去找,我很忙~然后我默默地蹲着写zTree的搜索方法去了.为什么呢?因为我说了句“找不到是不可 ...

  2. zTree的功能解析

    zTree ,一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点.兼容 IE.FireFox.Chrome 等浏览器, ...

  3. js树形控件—zTree使用总结

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

  4. Angular整合zTree

    1 前提准备 1.1 新建一个angular4项目 参考博文:点击前往 1.2 去zTree官网下载zTree zTree官网:点击前往 三少使用的版本:点击前往 2 编程步骤 从打印出zTree对象 ...

  5. z-tree学习笔记

    做项目时,需要用到带复选框的tree.经比较后优选了ztree,功能强大,文档清晰. http://www.treejs.cn/v3/api.php 直接上代码吧. 1.下载ztree后.将里面需要用 ...

  6. jQuery+zTree

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

  7. jQuery树形控件zTree使用小结

    作者:Fonour 字体:[增加 减小] 类型:转载 时间:2016-08-02我要评论 这篇文章主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小 ...

  8. jQuery树形控件zTree使用

    http://www.cnblogs.com/AutumnRhyme/p/5915769.html .................................................. ...

  9. ZTREE改版 -- 增删减 -- 图标字体化 完整改版

    引言 这次主要更新增删改功能以及修复存在的一些bug:图标能动态改变,回调函数添加 ZTREE改版功能完善 前面文章对于改版过程做了较详细的解释,这里就不多加赘述了,直接看效果图: 增加按钮: 修改节 ...

随机推荐

  1. MySQL高可用之MGR安装测试（续）

      Preface       I've implemented the Group Replication with three servers yesterday,What a shame it ...

  2. python 用selenuim判断页面是否全部加载完成,并且加上最大时长,超过时长报错

    STR_READY_STATE = '' time_start = time.time() while STR_READY_STATE != 'complete': time.sleep(0.001) ...

  3. MyEclipse格式化JSP代码，其中Javascript无法格式化的原因

    MyEclipse格式化JSP代码,其中Javascript无法格式化的原因: 可能是JSP页面代码有错误的地方,而且可能是一个很微小的错误,比如多写了一个标点符号,这个需要仔细检查,包括HTML.C ...

  4. PHP中判断变量为空的几种方法小结

    isset  主要用来判断变量是否被初始化过empty  可以将值为 "假"."空"."0"."NULL"." ...

  5. linux网络服务实验

    1.设置window IP地址为192.168.3.XX,掩码24位. 2.设置Linux IP地址为192.168.3.YY,掩码24位.window与Linux互相ping通. 3.在linux中 ...

  6. mybatis 打印SQL

    如果使用的是application.properties文件,加入如下配置: #打印SQL logging.level.com.jn.ssr.supererscuereporting.dao=debu ...

  7. Python3爬虫（三）请求库的使用之urllib

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.urllib库: 1. 是Python内置的HTTP请求库 2. 在Python2中,由urllib和urll ...

  8. （数据科学学习手札04）Python与R在自定义函数上的异同

    自编函数是几乎每一种编程语言的基础功能,有些时候我们需要解决的问题可能没有完全一致的包中的函数来进行解决,这个时候自编函数就成了一样利器,而Python与R在这方面也有着一定的差别,下面举例说明: P ...

  9. 二叉树和二叉查找树--数据结构与算法JavaScript描述(10)

    二叉树和二叉查找树 概念 树是一种非线性的数据结构,以分层的方式存储数据. 树被用来存储具有层级关系的数据,比如文件系统的文件: 树还被用来存储有序列表. 一棵树最上面的节点称为根节点. 如果一个节点 ...

  10. CPU计算密集型和IO密集型

    CPU计算密集型和IO密集型 第一种任务的类型是计算密集型任务,其特点是要进行大量的计算,消耗CPU资源,比如计算圆周率.对视频进行高清解码等等,全靠CPU的运算能力.这种计算密集型任务虽然也可以用多 ...