ztree的使用

安装jquery

使用ztree之前，首先需要安装jquery
vue项目中，npm install jquery --save-dev安装jquery依赖
在build文件夹中的webpack.base.conf.js文件中，引入webpack

var webpack = require("webpack");

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    })
  ],

安装ztree

ztree不可以通过npm安装，可以通过官网下载
官网入门指南链接：http://www.treejs.cn/v3/faq.php#_206

下载demo链接(需要的js、css文件对应目录下有)：https://gitee.com/zTree/zTree_v3
如果是在html页面引用，可以根据官网步骤来：

vue项目中使用ztree，则是以下步骤：
1、拷贝需要的js、css文件，注意文件目录层级，plugins和src平级

2、在main.js文件中，引入这些需要的ztree文件

// 引入ztree
import "../plugins/ztree/js/jquery-1.4.4.min.js";
import "../plugins/ztree/js/jquery.ztree.core.min.js";
import "../plugins/ztree/js/jquery.ztree.excheck.min.js";
// 引入ztree的css样式文件
import "../plugins/ztree/css/zTreeStyle/zTreeStyle.css";

3、在vue项目中使用

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

<script>
export default {
  mounted() {
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
      data: {
        simpleData: {
          enable: true
        },
        check: {
          enable: true
        }
      }
    };
    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    var zNodes = [
      {
        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);
    });
  }
};
</script>

<style scoped></style>

以上是使用ztree的步骤，正常的情况下，在页面上可以看到一个简易的树形结构。

更多demo

通过上述步骤，可以得到ztree树，如果想要使用更多功能，可参考下载的demo中的文件或官网API
下载demo链接(需要的js、css文件对应目录下有)：https://gitee.com/zTree/zTree_v3

官网API：http://www.treejs.cn/v3/api.php