Ztree的简单操作

文章目录

• 前言
• 一、一、zTree是什么？
• 二、使用步骤
  • 1.下载
  • 2.拖入下载好的zTree中的css和js部分
  • 3.具体使用方法
• 总结

---

前言

本人刚学习不久，恐有技术不精，多多包涵

---

一、zTree是什么？

 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

二、使用步骤

1.下载

代码如下（示例）：

zTree是一个插件，需要到官方先下载下来
 zTree官方网址

2.拖入下载好的zTree中的css和js部分

创建一个web项目,并将css和js拖入目录下(如已有css和js包,则将ztree中css和js的内容分别拖入即可)

 3.具体使用方法

代码如下（示例）：

<SCRIPT type="text/javascript">

    var setting = {	};

    var zNodes =[
      { name:"父节点1 - 展开", open:true,
        children: [
          { name:"父节点11 - 折叠",
            children: [
              { name:"叶子节点111"},
              { name:"叶子节点112"},
              { name:"叶子节点113"},
              { name:"叶子节点114"}
            ]},
          { name:"父节点12 - 折叠",
            children: [
              { name:"叶子节点121"},
              { name:"叶子节点122"},
              { name:"叶子节点123"},
              { name:"叶子节点124"}
            ]},
          { name:"父节点13 - 没有子节点", isParent:true}
        ]},
      { name:"父节点2 - 折叠",
        children: [
          { name:"父节点21 - 展开", open:true,
            children: [
              { name:"叶子节点211"},
              { name:"叶子节点212"},
              { name:"叶子节点213"},
              { name:"叶子节点214"}
            ]},
          { name:"父节点22 - 折叠",
            children: [
              { name:"叶子节点221"},
              { name:"叶子节点222"},
              { name:"叶子节点223"},
              { name:"叶子节点224"}
            ]},
          { name:"父节点23 - 折叠",
            children: [
              { name:"叶子节点231"},
              { name:"叶子节点232"},
              { name:"叶子节点233"},
              { name:"叶子节点234"}
            ]}
        ]},
      { name:"父节点3 - 没有子节点", isParent:true}

    ];

    $(document).ready(function(){
      $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    });
    //-->
  </SCRIPT>

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了zTree的使用，zTree在之后的过程中被广泛应用在系统的权限管理中