如何在vue项目使用ztree
- 下载ztree
ztree官网下载ztree插件,并将对应的 js 和 css 文件放到vue项目中。
2. 引入
在vue项目中的main.js
入口文件引入
import $ from 'jquery';
import '@/assets/js/ztree/zTreeStyle/zTreeStyle.css';
import './assets/js/ztree/jquery.ztree.core.js';
import './assets/js/ztree/jquery.ztree.excheck.js';
import './assets/js/ztree/jquery.ztree.exedit.js';
- 配置
在vue项目的 vue.config.js
中进行配置。
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'windows.jQuery': 'jquery'
})
]
},
}
- 使用
完成以上几步就可以使用ztree了。
ztree的使用案例
需求
- 使用阿里图标自定义增、删、改按钮。
- 点击节点的文字查看对应节点的信息,并在右侧显示对应的节点信息。
- 点击
+
图标,右侧显示对应的输入表单。 - 点击删除图标,弹出对话框确认是否删除。点击确定删除对应的节点。
具体代码
封装ztree组件
template部分
<template>
<div class='objZtree'>
<div class='split-body'>
<div class='split-content'>
<ul id='objTree' class='ztree' style='min-height: 500px'></ul>
</div>
</div>
</div>
</template>
script部分
<script>
// 引入阿里图标
import './iconfont.css';
export default {
data() {
return {
setting: {
view: {
showIcon: false,
addHoverDom: this.addHoverDom,
removeHoverDom: this.removeHoverDom
},
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false
},
callback: {
// beforeRemove: this.beforeRemove
beforeAsync: this.beforeAsync,
onAsyncSuccess: this.zTreeOnAsyncSuccess,
onClick: this.zTreeOnClick
},
data: {
key: {
name: 'DisplayName'
}
},
async: {
enable: true,
url: function(treeId, treeNode) {
// console.log('异步请求', treeId, treeNode); // 得到当前节点的信息
return './index.vue';
},
type: 'GET'
}
},
initalNode: {
DisplayName: '一级分类',
BrowseName: 'ModelLib',
iconSkin: 'iconObjectType',
nodeClass: 'Object Type',
uri: '/system/5013',
isParent: true,
nocheck: true
},
// 当前节点的treeId
currentTreeId: ''
};
},
methods: {
// 初始化 ztree
loadObjTree() {
$.fn.zTree.init($('#objTree'), this.setting, this.initalNode);
},
// 点击一级分类前的展开标志触发异步请求,模拟异步请求添加子节点
beforeAsync(treeId, treeNode) {
console.log('异步请求发送之前触发', treeId, treeNode);
},
zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
console.log('异步请求成功回调函数执行', event, treeId, treeNode, msg);
let zTree = $.fn.zTree.getZTreeObj(treeId);
// let selectedNodes = zTree.getSelectedNodes();
let item = {
DisplayName: '基础类模型',
bowserPath: '/aa/bb'
};
item.nodes = [
{
forward: true,
id: 11111,
includeSubtype: false
}
];
zTree.addNodes(treeNode, item);
},
zTreeOnClick(event, treeId, treeNode) { // 点击某一个节点时触发的函数
console.log('点击节点文字查看', event, treeId, treeNode);
let zTree = $.fn.zTree.getZTreeObj(treeId);
let selectedNodes = zTree.getSelectedNodes(true); // 得到点击的节点(选中的节点)
this.$emit('changeCheckBoxVisible', selectedNodes); // 调用父组件定义的方法,并传递该节点的信息
},
// 鼠标移入节点时触发,
addHoverDom(treeId, treeNode) {
this.currentTreeId = treeId; // 将当前节点保存到实例中,以便该组件使用
var aObj = $('#' + treeNode.tId + '_span');
if ($('#diyBtnGroup').length>0) return;
// 查看是否存在自定义的按钮组,因为 addHoverDom 会触发多次
// 使用阿里图标自定义增删改按钮
var editStr = `<span id='diyBtnGroup'>
<span id='diyBtn_space_${treeNode.id}' οnfοcus='this.blur();'> </span>
<i class="iconfont icon-tianjia" style="color: #1296db;" id='diyBtn_${treeNode.id}_add' οnfοcus='this.blur();'></i>
<i class="iconfont icon-bianji" style="color: #1296db;" id='diyBtn_${treeNode.id}_modify' οnfοcus='this.blur();'></i>
<i class="iconfont icon-cangpeitubiao_shanchu" style="color: #1296db;" id='diyBtn_${treeNode.id}_delete' οnfοcus='this.blur();'></i>
</span>`;
aObj.append(editStr); // 在每个节点后添加自定义按钮组
// 获取到对应按钮的DOM元素
var btnDelete = $('#diyBtn_'+treeNode.id + '_delete');
var btnAdd = $('#diyBtn_'+treeNode.id + '_add');
var btnModify = $('#diyBtn_'+treeNode.id + '_modify');
// 为每个按钮绑定不同的点击事件
if (btnDelete) {
btnDelete.bind('click', (e) => {
e.stopPropagation();
// 触发父组件的方法,使删除对话框显示
this.$emit('changeDelModelFlag');
});
};
if (btnAdd) {
btnAdd.bind('click', (e) => {
e.stopPropagation();
this.$emit('changeAddFormFlag'); // 点击删除按钮,调用父组件定义的方法,弹出删除确认框
});
}
if (btnModify) {
btnModify.bind('click', function(e) {
e.stopPropagation();
// 更新节点的操作,具体逻辑与添加节点的逻辑类似,此处只是模拟更新操作
var treeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = treeObj.getSelectedNodes();
nodes[0].name = '更新了节点';
treeObj.updateNode(nodes[0]);
});
}
},
// 删除之前调用的逻辑,ztree提供的删除节点的回调函数
// beforeRemove(e) {
// console.log(e);
// alert('确定要删除吗');
// },
// 子组件定义删除节点的方法,通过在父组件的删除对话框中点击确定按钮,调用该方法删除对应的节点
delNode() {
var treeObj = $.fn.zTree.getZTreeObj(this.currentTreeId);
var nodes = treeObj.getSelectedNodes();
treeObj.removeNode(nodes[0]);
},
// 自组件自定义添加节点的方法,在父组件中添加表单的确认按钮点击后,调用该方法添加节点
addNode(addInfo) {
var treeObj = $.fn.zTree.getZTreeObj(this.currentTreeId);
// console.log(treeId); // id='objTree'
// console.log('treeObj', treeObj); // 通过 treeId 获取被操作的ztree对象
var nodes = treeObj.getSelectedNodes(); // 获取所有被选中的节点,返回一个数组
// var parentNode = nodes[0].getParentNode(); // 获取某一个节点的父节点,若没有父节点返回null
// console.log('父节点', parentNode);
var newNode = { // 自定义新节点用于模拟添加节点操作,真实的节点内容,可以通过在父组件中调用该方法时,通过参数传递过来addInfo
DisplayName: '模型库2号',
BrowseName: 'ModelLib',
iconSkin: 'iconObjectType'
};
// 第一个参数为添加节点的位置,在当前选中节点下添加新节点
var add = treeObj.addNodes(nodes[0], newNode);
console.log('新增节点后的返回值', add); // 以数组的方式返回新增的节点
},
// 鼠标离开当前节点的逻辑,鼠标离开时,解除事件的绑定
removeHoverDom: (treeId, treeNode) => {
// 为了方便删除整个 button 组,上面我用 #diyBtnGroup 这个包了起来,这里直接删除外层即可,不用挨个找了。
$('#diyBtnGroup').unbind().remove();
}
},
mounted() {
// 当个组件挂载完毕时,调用初始化ztree的方法,初始化ztree
this.loadObjTree();
}
};
</script>
注解
为什么添加阻止冒泡?
自定义增删改按钮,并绑定事件后形成的代码结构为:
按照需求是:当点击基础类模型后右侧是显示查看节点内容的表格,点击+
显示,添加表单的内容,由于存在事件冒泡机制,所以当点击+
后,却显示的是查看节点内容的表格,所以要在增删改的事件中阻止事件冒泡。
父组件
template部分
<template>
<div class="meta-data-classic">
<Input v-model="cateName" search placeholder="Enter something..." style="width: 300px" />
<div class="mainContainer">
<div class="leftContianer">
<!-- 调用ztree组件,同时把改变增删改显示的方法传递给ztree组件 -->
<Ztree
@changeDelModelFlag="changeDelModelFlag"
@changeAddFormFlag="changeAddFormFlag"
@changeCheckBoxVisible="changeCheckBoxVisible"
ref="ZtreeRef"
/>
</div>
<div class="rightContainer">
<!-- 添加分类的表单 -->
<Form ref="formCustom" :model="addForm" :label-width="80" v-if="addFormVisible">
<FormItem label="分类" prop="passwd">
<Input type="password" v-model="addForm.category"></Input>
</FormItem>
<FormItem label="创建人" prop="passwdCheck">
<Input type="password" v-model="addForm.founder"></Input>
</FormItem>
<FormItem label="所属部门" prop="age">
<Input type="text" v-model="addForm.department" number></Input>
</FormItem>
<FormItem label="备注" prop="age">
<Input type="text" v-model="addForm.remark" number></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="addSubmit('formCustom')">确定</Button>
<Button @click="handleCancel('formCustom')" style="margin-left: 8px">取消</Button>
</FormItem>
</Form>
<!-- 查看展示节点数据 -->
<div class="checkInfo" v-if="checkBoxVisible">
<Table :columns="checkColumns" :data="checkData" width="500"></Table>
<Button type="primary" @click="checkBoxVisible = false">确定</Button>
<Button type="primary" @click="checkBoxVisible = false">取消</Button>
</div>
</div>
</div>
<!-- 删除对应节点的确认对话框 -->
<Modal
v-model="delModelVisible"
@on-ok="onOk"
>
<p>你确定要删除该节点吗</p>
</Modal>
</div>
</template>
script部分
<script>
import Ztree from './bindPoints';
export default {
name: 'meta-data-classic',
components: {
Ztree
},
data() {
return {
delModelVisible: false,
addFormVisible: false,
checkBoxVisible: false,
cateName: '',
addForm: {
category: '',
founder: '',
department: '',
remark: ''
},
checkColumns: [
{
title: '名称',
key: 'title'
},
{
title: '信息',
key: 'info'
}
],
checkData: [
{
title: '分类',
info: 'category'
},
{
title: '创建人',
info: 'founder'
},
{
title: '所属部门',
info: 'department'
},
{
title: '备注',
info: 'remark'
}
]
};
},
methods: {
changeDelModelFlag() {
this.delModelVisible = true; // 显示删除对话框
},
onOk() {
// 点击删除对话框的确认按钮,调用子组件的方法删除对应的节点
this.$refs.ZtreeRef.delNode();
this.checkBoxVisible = false;
this.addFormVisible = false;
},
changeAddFormFlag() {
this.checkBoxVisible = false;
this.addFormVisible = true;
},
handleCancel() {
this.addFormVisible = false;
},
changeCheckBoxVisible(nodeInfo) {
console.log('对应节点的具体信息', nodeInfo);
this.checkBoxVisible = true;
this.addFormVisible = false;
},
addSubmit() {
// 点击添加表单的确定按钮,调用子组件的添加节点的方法,添加节点,同时将addForm传递过去
this.$refs.ZtreeRef.addNode(this.addForm);
}
}
};
</script>
style部分
<style scoped>
.meta-data-classic .mainContainer{
display: flex;
}
.meta-data-classic .mainContainer .leftContianer {
flex: 3;
}
.meta-data-classic .mainContainer .rightContainer {
flex: 4;
}
.meta-data-classic .mainContainer .rightContainer Form {
width: 60%;
}
.rightContainer .checkInfo Button{
margin-top: 10px;
}
.rightContainer .checkInfo Button:nth-of-type(1) {
margin-left: 370px;
margin-right: 20px;
}
</style>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!