安装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