建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery树形控件ztree

来源:易助科技网浏览量:15收藏

简介


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


JQuery树形控件ztree-示例图


zTree 特点


最新版的zTree将核心代码按照功能进行了分割,不需要的代码可以不用加载,如普通使用只需要加载核心的jquery.ztree.core-3.5.js,需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js,需要使用编辑功能加载jquery.ztree.exedit-3.5.min.js

采用了延迟加载技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀

兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器

支持 JSON 数据

支持静态 和 Ajax 异步加载节点数据

支持任意更换皮肤 / 自定义图标(依靠css)

支持极其灵活的 checkbox 或 radio 选择功能

提供多种事件响应回调

灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽



使用


1.  引入 ztree.css 、ztree.js 和 jquery.js 文件


2.  HTML


<div>
  <ul id= "treeDemo" class= "ztree" ></ul>
</div>


3.  调用


<SCRIPT LANGUAGE= "JavaScript" >
  var zTreeObj;
  var setting = {};
  
  // zTree 的参数配置,后面详解
  var zNodes = [
    // zTree 的数据属性,此处使用标准json格式
    {
      name: "test1" , open: true , children: [
        { name: "test1_1" }, { name: "test1_2" }
      ]
    },
    {
      name: "test2" , open: true , children: [
        { name: "test2_1" }, { name: "test2_2" }
      ]
    }
  ];
  
  $(document).ready( function () {zTreeObj = $.fn.zTree.init($( "#treeDemo" ), setting, zNodes); 
    //初始化zTree,三个参数一次分别是容器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源
  });
</SCRIPT>



相关链接


官网地址 : https://www.treejs.cn/v3/main.php#_zTreeInfo

GotHub 地址 :  https://github.com/zTree

码云地址:https://gitee.com/zTree/zTree_v3

bootCDN下载地址 :https://www.bootcdn.cn/zTree.v3/