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. 修改二维码生成插件jquery.qrcode.js支持加入自定义LOGO

    1,将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> & ...

  2. phpspider 的简单使用

    phpspider 的简单使用 phpspider是一款PHP开发蜘蛛爬虫框架. 官方github下载地址:https://github.com/owner888/phpspider官方文档下载地址: ...

  3. 批处理，%~d0 cd %~dp0 代表什么意思

    批处理,%~d0 cd %~dp0 代表什么意思   ~dp0 “d”为Drive的缩写,即为驱动器,磁盘.“p”为Path缩写,即为路径,目录cd是转到这个目录,不过我觉得cd /d %~dp0 还 ...

  4. ZooKeeper异常：Error connecting service It is probably not running

    ZooKeeper安装后使用以下命令可以启动成功 bin/zkServer.sh start 但是使用下面命令查看启动状态,则报错误: bin/zkServer.sh status Error con ...

  5. python中如何统计一个类的实例化对象

    类中的静态变量 需要通过类名.静态变量名 来修改 :通过对象不能修改 python中如何统计一个类的实例化对象?? class Person: #静态变量count,用于记录类被实例化的次数 coun ...

  6. unity独立游戏开发日志2018/09/26

    最近太忙,今天吃饭的时候灵感一现...想到了随机地图生成的方法,不过可能实现的比较笨...还需要优化,大佬绕过. 注释没打,最后统一解释. using System.Collections; usin ...

  7. ABAP CDS ON HANA-(8)算術式

    Arithmetic expression in CDS View Allowed Arithmetic operators in CDS view. CDS View- @AbapCatalog.s ...

  8. python2.7练习小例子（十三）

        13):题目:将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5.     程序分析:对n进行分解质因数,应先找到一个最小的质数k,然后按下述步骤完成.(1)如果这个质数恰等于 ...

  9. elasticsearch 关联查询

    父-子关系文档 父-子关系文档 在实质上类似于 nested model :允许将一个对象实体和另外一个对象实体关联起来. 而这两种类型的主要区别是:在 nested objects 文档中,所有对象 ...

  10. PRO*C 函数事例 2 -- 数据库操作

    Pro*C Oracle 的嵌入式开发,数据库处理部分最好能提取到一个模块,按照对不同数据库表的操作分成不同的.pc文件(如 DbsInstStat.pc).将此模块编译成库(c文件编译时链接此库), ...