jquery的树组件ztree.js基本用法

项目中经常会用到下图所示的组织树,今天仔细研究下官方文档,在这里把一些入门的技巧记录下来。

[图片上传失败...(image-b1fd92-1548556294996)]

【简介】zTree 是一个依靠 jQuery 实现的多功能 “树插件”。形式多样,功能强大。

  • 配置方式采用jQuery与JSON的语法结构,参数配置简单,较易上手。
  • 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器,即使在IE6下也能很好的支持。
  • 支持静态 和 Ajax 异步加载节点数据。
  • 支持任意更换皮肤 / 自定义图标(依靠css)功能。
  • 支持极其灵活的 checkbox 或 radio 选择功能。
  • 提供多种事件响应回调。
  • 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽。
  • 在一个页面内可同时生成多个 Tree 实例

一、准备工作

从官网github上下载源码,将css,img,js文件引入到项目中,如下所示:






二、实例演示

官方api 已经非常详细介绍所有函数和参数设置,在这里只介绍最基本和常用的效果展示。

1、核心函数的配置

  • 核心函数:zTree(setting, [zTreeNodes])

      $(document).ready(function(){
              $.fn.zTree.init($("#treeDemo"), setting, zNodes);
          });
    
  • 核心参数:setting。
    zTree 的参数配置都在这里完成,如树的样式、事件、访问路径等都在这里配置。

      var setting = {
          view: {
              dblClickExpand: false,
              showLine: true,
              selectedMulti: false
          },
          data: {
              simpleData: {
                  enable:true,
                  idKey: "id",
                  pIdKey: "pId",
                  rootPId: ""
              }
       };
    

具体参数的含义可参考官网。

  • 核心参数:zTreeNodes。
    zTree 的全部节点数据集合,采用由JSON对象组成的数据结构,简单来说,这里使用Json格式保存了树的所有信息。
    zTreeNodes的格式分为两种:
    1、标准json数据:标准的 JSON 数据需要嵌套表示节点的父子包含关系;

      var nodes = [
          {name: "父节点1", children: [
              {name: "子节点1"},
              {name: "子节点2"}
          ]}
      ];
    

    2、简单模式的 JSON 数据:简单模式的 JSON 数据需要使用 id / pId 表示节点的父子包含关系。

      var nodes = [
          {id:1, pId:0, name: "父节点1"},
          {id:11, pId:1, name: "子节点1"},
          {id:12, pId:1, name: "子节点2"}
      ];
    

2、其他功能效果的演示

  • 自定义图标
    实现父节点的图标自定义,利用 节点数据的 icon / iconOpen / iconClose 属性实现;利用 节点数据的 iconSkin 属性 配合 css 实现自定义图标同样实现自定义图标。

var nodes = [
//父节点展开 折叠时使用相同的图标
{ name:"父节点1", icon:"/img/parent.gif"},

//父节点展开 折叠时分别使用不同的图标
{ name:"父节点2", iconOpen:"/img/open.gif", iconClose:"/img/close.gif"}, 

//叶子节点个性化图标
{ name:"叶子节点", icon:"/img/leaf.gif"},

//父节点展开 折叠时使用相同的图标
{ name:"父节点1", iconSkin:"diy01"},

//父节点展开 折叠时分别使用不同的图标
{ name:"父节点2", iconSkin:"diy02"},

//叶子节点个性化图标
{ name:"叶子节点", iconSkin:"diy03"}

]

  • 很多其他功能,如异步加载,根据参数搜索节点,添加单复选框,拖拽增删编辑,以及其他可扩展样式功能,具体请参照官方文档。

三、注意事项

点击可直接下载源文件

你可能感兴趣的:(jquery的树组件ztree.js基本用法)