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. Python语言与其他语言对比

    python作为一门高级编程语言,它的诞生虽然很偶然,但是它得到程序员的喜爱却是必然之路,以下是Python与其他编程语言的优缺点对比: 一:简介 1.Python 优势:简单易学,能够把用其他语言制 ...

  2. js 判断两个时间相差的天数

    judgeDay(sDate1, sDate2) { const sDate1 = `${new Date(sDate1).getFullYear()}-${new Date(sDate1).getM ...

  3. Jackson 触发的String.intern() bug, 导致内存持续增加，JVM-Java内存泄漏

    我在本地用Jackson可以复现这个问题了. import java.io.IOException; import java.util.Map; import java.util.Random; im ...

  4. go web处理上传

    要使表单能够上传文件,第一步就是添加form的enctype属性,enctype属性有如下三种情况: application/x-www-form-urlencoded 表示在发送前编码所有字符(默认 ...

  5. class实现Stack

    基于class实现一个存储string类型的Stack 头文件: //stack.h #include<vector> #include<string> class Stack ...

  6. Django学习之天气调查实例（3）：部署静态文件CSS、JS、images等（部署环境基于Ubuntu）

    在设计登录界面时,采用了网上下载的登录模板,漂亮,简易.但是在测试和部署时,发现原来模板中采用的js文件和css文件,却着实让我折腾了好几天. 在以往的网页设计中,一般只要把测试站点开启后,网页中的静 ...

  7. 通过数据库恢复SharePoint网站

           SharePoint网站一般包含很多个数据库,最主要的有3个,分别是SharePoint_Admin_Content(管理中心数据库),SharePoint_Config(配置数据库)和 ...

  8. 部署：阿里云ECS部署Docker CE

    1 部署阿里云ECS,选择CentOS操作系统,并启动实例: 2 部署Docker CE: a.检查centos版本: $ cat /etc/redhat-release CentOS Linux r ...

  9. Qt Qwdget 汽车仪表知识点拆解3 进度条编写

    先贴上效果图,注意,没有写逻辑,都是乱动的 这篇我来说说左侧的这个进度条的实现原理,其实更简单,哈哈哈 有一个大的widget,根据素材,我放了10个label 剩下的就是写一个函数,根据数据的不同, ...

  10. url解读

    我刚刚学习的时候,我抓到包不知道哪个是协议.哪个是是服务器地址.哪个是端口号...不知道有没有老铁遇到跟我一样的. 接口:http://172.168.12.0:8888/old/login.do 解 ...