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. Co. - VMware - vSphere

    VMware vSphere 组件 VMware vSphere是VMware推出的基于云计算的新一代数据中心虚拟化套件,它由VMware ESXi.VMware vCenter Server.VMw ...

  2. Mac系统升级后在终端输入git命令时遇到的问题

    Mac系统升级git会找不到并且报错:xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools) ...

  3. JS如何给ul下的所有li绑定点击事件，点击使其弹出下标和内容

    这是一个非常常见的面试题,出题方式多样,但考察点相同,下面我们来看看这几种方法:方法一: var itemli = document.getElementsByTagName("li&quo ...

  4. 带cookie请求数据

    经常会用到一些采集网上的资源,普通网站很好采,get_file_contents()/c_url(). 有的网站会有登陆后才能采集,需要带cookie请求获取(登陆网站相同方法),下面记录一下使用方法 ...

  5. Hadoop(17)-MapReduce框架原理-MapReduce流程,Shuffle机制,Partition分区

    MapReduce工作流程 1.准备待处理文件 2.job提交前生成一个处理规划 3.将切片信息job.split,配置信息job.xml和我们自己写的jar包交给yarn 4.yarn根据切片规划计 ...

  6. Less Is More【少即是多】

    Less Is More Adults understand what it feels like to be flooed with objects. 成年人知道被物品淹没的感觉. Why do w ...

  7. MapRudecer

    MapReducer基本概念 Mapreduce是一个分布式运算程序的编程框架,是用户开发“基于hadoop的数据分析应用”的核心框架: Mapreduce核心功能是将用户编写的业务逻辑代码和自带默认 ...

  8. js 操作表格行数的删减

    沉溺了好几个月了,自从年假回来就一直在忙换工作的事情: 新环境.新同事,一如既往的工作, 那么闲话不多说,前两天师妹问我要一个类似于添加和删除的demo:闲暇时间我就参照一些代码写了一下, (发现有错 ...

  9. TestNG执行测试用例的顺序

    import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.WebEle ...

  10. Sersync实时备份服务部署实践