ztree在Vue2.5.2下面的运用实战
最近有兴研究了Vue2中应用ztree插件。方便大家参考。一. 关于Vue创建项目大家可以网上找下。首先要安装node环境，和cnpm镜像，这样可以更快下载相关文件(npm可以替换成cnpm进行相关下载)。1.npm install vuenpm install vue2.npm install -g vue-cli 全局安装下命令行工具cli，可用于快速搭建大型单页
·
最近有兴研究了Vue2中应用ztree插件。方便大家参考。
一. 关于Vue创建项目大家可以网上找下。
首先要安装node环境，和cnpm镜像，这样可以更快下载相关文件(npm可以替换成cnpm进行相关下载)。
1.npm install vue
2.npm install -g vue-cli 全局安装下命令行工具cli，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
3.vue init webpack my-project //创建一个基于webpack模板的新项目
4.cd my-project //进入新建的项目目录下
5.npm install //安装项目所需要的依耐
6.npm run dev //运行此命令就可以在浏览器运行查看效果
二.新建项目之后请看下面
1.新建项目之后请看下面，新建一个文件夹plugins，下面放所需要的ztree插件和ztree所依耐的jQuery文件。
2.在components文件下新建一个zTree.vue组件
3.在index.html里面引用ztree样式文件zTreeStyle.css（前面的图标可以自定义可以参考官网）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./plugins/ztree/css/zTreeStyle.css" />
<title>ztree</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4.加入项目所引用的ztree的js文件。两种方式第一在main.js里面，第二在zTree.vue组件中单独加入
main.js中代码：
import $ from "jquery"
import "../plugins/jquery.3.2.1.js"
import "../plugins/ztree/js/jquery.ztree.core.min.js"
import "../plugins/ztree/js/jquery.ztree.excheck.min.js"
import "../../plugins/jquery.3.2.1.js"
import "../../plugins/ztree/js/jquery.ztree.core.min.js"
import "../../plugins/ztree/js/jquery.ztree.excheck.min.js"
三。组件模板应用
在hello.vue中引入ztree的组件
整个文件代码如下：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
<zTree></zTree>
</div>
</template>
<script>
import zTree from './zTree.vue'
export default {
name: 'HelloWorld',
components:{
zTree
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
完整代码：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import zTree from '@/components/zTree'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},{
path: '/',
name: 'zTree',
component: zTree
}
]
})
五. ztree.vue文件完整代码
值得注意的是这里的回调函数里面的ztree的id名字必须对应（$.fn.zTree.getZTreeObj("treeDemo");treeDemo对应于id名）
<template>
<div id="areaTree">
<div class="box-title">
<a href="#">列表<i class="fa fa-refresh" @click="freshArea">点击</i></a>
</div>
<div class="tree-box">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</div>
</template>
<script>
// 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用
//import "../../plugins/jquery.3.2.1.js"
//import "../../plugins/ztree/js/jquery.ztree.core.min.js"
//import "../../plugins/ztree/js/jquery.ztree.excheck.min.js"
export default {
name: 'areaTree',
components:{
},
data:function(){
return{
setting:{
check: {
enable: true,
nocheckInherit: false ,
chkboxType: { "Y": "p", "N": "s" }
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: this.beforeClick,
onClick: this.zTreeOnClick,
onCheck: this.zTreeOnCheck,
}
},
/*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}
]*/
zNodes:[
{ id:1,pid:0,name:"大良造菜单",open:true,nocheck:false,
children: [
{ id:11,pid:1,name:"当前项目"},
{ id:12,pid:1,name:"工程管理",open:true,
children: [
{ id:121,pid:12,name:"我的工程"},
{ id:122,pid:12,name:"施工调度"},
{ id:1211,pid:12,name:"材料竞价"}
]
},
{ id:13,pid:1,name:"录入管理",open:true,
children: [
{ id:131,pid:13,name:"用工录入"},
{ id:132,pid:13,name:"商家录入"},
{ id:1314,pid:13,name:"机构列表"}
]
},
{ id:14,pid:1,name:"审核管理",open:true,
children: [
{ id:141,pid:14,name:"用工审核"},
{ id:142,pid:14,name:"商家审核"},
{ id:145,pid:14,name:"机构审核"}
]
},
{ id:15,pid:1,name:"公司管理",open:true,
children: [
{ id:1517,pid:15,name:"我的工程案例"},
{ id:1518,pid:15,name:"联系人设置"},
{ id:1519,pid:15,name:"广告设置"}
]
},
{ id:16,pid:1,name:"业务管理",open:true,
children: [
{ id:164,pid:16,name:"合同范本"},
{ id:165,pid:16,name:"合同列表"},
{ id:166,pid:16,name:"需求调度"}
]
},
{ id:17,pid:1,name:"订单管理",open:true,
children: [
{ id:171,pid:17,name:"商品订单"},
{ id:172,pid:17,name:"用工订单"},
{ id:175,pid:17,name:"供应菜单"}
]
},
{ id:18,pid:1,name:"我的功能",open:true,
children: [
{ id:181,pid:18,name:"免费设计"},
{ id:182,pid:18,name:"装修报价"},
{ id:1817,pid:18,name:"项目用工"}
]
},
{ id:19,pid:1,name:"分润管理",open:true,
children: [
{ id:191,pid:19,name:"分润列表"}
]
},
{ id:110,pid:1,name:"运营管理",open:true,
children: [
{ id:1101,pid:110,name:"代理列表"},
{ id:1102,pid:110,name:"代售商品"}
]
},
]
}
]
//zNodes 这个里面数据可以灵活配置的，不再叙述
/*zNodes:[
{
"id": 1,
"name": "首页",
"purview": 1,
"isVisible": false,
"buttons": [],
"items": [],
isParent:true,
},
{
"id": 2,
"name": "前端布置",
"purview": 1,
"isVisible": false,
"buttons": [],
// "items": [
"children": [
{
"id": 11,
// "title": "banner位设置",
"name": "banner位设置",
"purview": 1,
"itemButtons": []
},
{
"id": 12,
"name": "分区和标签",
"purview": 0,
// "itemButtons": [
"children": [
{
"id": 5,
"name": "二级分区管理",
"purview": 0,
"key": ""
}
]
},
{
"id": 9,
"name": "启动页和icon设置",
"purview": 0,
"itemButtons": []
},
{
"id": 10,
"name": "礼物设置统计",
"purview": 0,
"itemButtons": []
}
]
},
{
"id": 3,
"name": "用户管理",
"purview": 1,
"isVisible": false,
"children": [
{
"id": 6,
"name": "--用户",
"purview": 1,
"key": "Users"
},
{
"id": 9,
"name": "查看记录",
"purview": 0,
"key": "seeRecord"
},
{
"id": 10,
"name": "查看消记录",
"purview": 0,
"key": "seeRecord2"
},
{
"id": 8,
"name": "--用户",
"purview": 1,
"key": "uUsers"
}
],
"items": []
},
{ name:"父节点1 - 展开", open:true,id:122,
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:"父节点3 - 没有子节点", isParent:true,id:3,}
]*/
}
},
methods:{
freshArea: function(){
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
},
zTreeOnClick: function(event, treeId, treeNode) {
console.log(treeNode.tId + ", " + treeNode.name);
},
zTreeOnCheck: function(event, treeId, treeNode) {
console.log(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
checkCount = zTree.getCheckedNodes(true).length,//选中
nocheckCount = zTree.getCheckedNodes(false).length,//未选中
changeCount = zTree.getChangeCheckedNodes().length;//获取输入框勾选状态被改变的节点集合（与原始数据 checkedOld 对比）
var checkedNames = [],checkedIds = [];
for (var i = 0; i <= zTree.getCheckedNodes(true).length - 1; i++) {
checkedIds.push(zTree.getCheckedNodes(true)[i].id);
checkedNames.push(zTree.getCheckedNodes(true)[i].name);
};
console.log(checkedIds);
console.log(checkedNames);
},
beforeClick: function(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
// zTree.checkNode(treeNode, !treeNode.checked, null, true);
zTree.checkNode(treeNode, !treeNode.checked, true, true); //第二个参数!treeNode.checked和"",省略此参数效果等同，则根据对此节点的勾选状态进行 toggle 切换，第三个参数设置为true时候进行父子节点的勾选联动操作 ，第四个参数true 表示执行此方法时触发 beforeCheck & onCheck 事件回调函数；false 表示执行此方法时不触发事件回调函数
return false;
}
},
mounted(){
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes).expandAll(true);
}
}
</script>
<style>
/*@import '../../plugins/ztree/css/zTreeStyle.css';*/
#areaTree{
border:1px solid #e5e5e5; margin-bottom: 2px;border-radius: 4px;overflow: hidden;
}
.box-title{
border-radius: 3px 3px 0 0;background-color: #f5f5f5;
}
.box-title a{
color: #2fa4e7;
text-decoration: none;font-size:14px; display: block;
padding: 8px 15px;cursor: pointer;
}
.box-title .fa{
float:right;line-height: 20px;
}
</style>最后差不多整理完了，整理博客还是蛮耗功夫的。end。
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献6条内容
所有评论(0)