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. javascript--自定义弹出登陆窗口（弹出窗）

    web开发中浏览器对象封装了诸如prompt.alert.confirm等弹出框,但是有的弹出框并不能满足开发需要,需要我们自己定义弹出框,诸如用户登陆框.消息提示框等.本文利用弹出用户登陆框示例,对 ...

  2. Angular-chart.js 使用说明（基于angular.js工程）

    Angular-chart.js是基于Chart.js的angular组件,引入项目后直接操作数据即可. 引用方法:    分别将Chart.js.angular-chart.js.angular-c ...

  3. git克隆出错 github clone Permission denied (publickey) fatal Could not read from remote repo

    原文网址:http://blog.csdn.net/feeling450/article/details/53067563 github clone "Permission denied ( ...

  4. JAVA Web 项目中用到的技术

    JSPServletTomcatMySQL MavenSpringMVCHibernatejQueryBootstrapAngularJSBootStrap Table 下边两个是移动APP开发要用到 ...

  5. Linux中程序的编译和链接过程

    1.从源码到可执行程序的步骤:预编译.编译.链接.strip 预编译:预编译器执行.譬如C中的宏定义就是由预编译器处理,注释等也是由预编译器处理的. 编译: 编译器来执行.把源码.c .S编程机器码. ...

  6. 嵌入式框架Zorb Framework搭建五：事件的实现

    我是卓波,我是一名嵌入式工程师,我万万没想到我会在这里跟大家吹牛皮. 嵌入式框架Zorb Framework搭建过程 嵌入式框架Zorb Framework搭建一:嵌入式环境搭建.调试输出和建立时间系 ...

  7. C++ 求阶乘

    #include<iostream> using namespace std; ; //输入阶乘数 int main() { long long factorial[size]; fact ...

  8. （数据科学学习手札34）多层感知机原理详解&Python与R实现

    一.简介 机器学习分为很多个领域,其中的连接主义指的就是以神经元(neuron)为基本结构的各式各样的神经网络,规范的定义是:由具有适应性的简单单元组成的广泛并行互连的网络,它的组织能够模拟生物神经系 ...

  9. FPGA算法学习(1) -- Cordic（圆周系统之向量模式）

    旋转模式用来解决三角函数,实现极坐标到直角坐标的转换,基础理论请参考Cordic算法--圆周系统之旋转模式.那么,向量模式则用来解决反三角函数的问题,体现的应用主要是直角坐标向极坐标转换,即已知一点的 ...

  10. 最短路径算法 4.SPFA算法(1)

    今天所说的就是常用的解决最短路径问题最后一个算法,这个算法同样是求连通图中单源点到其他结点的最短路径,功能和Bellman-Ford算法大致相同,可以求有负权的边的图,但不能出现负回路.但是SPFA算 ...