ztree在Vue2.5.2下面的運用實戰
阿新 • • 發佈：2019-01-28
最近有興研究了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。