如何在VUE框架中使用ztree插件
一切还是以需求为导向！如下图所示：这是要求作出的效果。经过我综合考虑发现ztree插件与需求契合度比较高，所以果断的使用了该插件进行开发。简单说下需求：管理目录层级有四个子菜单，可以新建父目录和子目录以及对目录进行相关编辑操作。相信大家遇到的第一个问题就是如何使用ztree插件，没错！那自然要跑到ztree官网去看文档，熟读文档是必不可少的！读完文档后，那怎么在vue框架中配置ztree...
·
一切还是以需求为导向！如下图所示：这是要求作出的效果。经过我综合考虑发现ztree插件与需求契合度比较高，所以果断的使用了该插件进行开发。简单说下需求：管理目录层级有四个子菜单，可以新建父目录和子目录以及对目录进行相关编辑操作。
相信大家遇到的第一个问题就是如何使用ztree插件，没错！那自然要跑到ztree官网去看文档，熟读文档是必不可少的！读完文档后，那怎么在vue框架中配置ztree插件呢？网上的相关文章很少，这就需要自己摸索了。不过我已经踩过不少坑，童鞋拿去用即可。
下面开始贴代码：
html:
<el-dropdown @command="handleCommand">
<el-button type="primary">
管理目录层级<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown" style="width:145px;top: 189px;vertical-align: top;">
<el-dropdown-item command="1">新建目录</el-dropdown-item>
<el-dropdown-item command="2" :disabled="disabledMuse">新建子目录</el-dropdown-item>
<el-dropdown-item command="3" :disabled="disabledMuse">修改</el-dropdown-item>
<el-dropdown-item command="4" :disabled="disabledMuse">删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
// ztree主体
<div class="personal_library">
<div class="seachVal">
<el-input v-model="inputSeach" id="inputSeachs" placeholder="请输入关键字..." @focus="inputFocus" @blur="inputBlur" ></el-input>
<i class="el-icon-search" :class="{ iconSeach1 : isShowSeach1}"></i>
<i class="el-icon-close" :class="{ iconSeach2 : isShowSeach2}" @click="clearInput"></i>
<i class="el-icon-plus" :class="{ iconNone1 : isShowicon1}" @click="expandAndCloseNode(true)"></i>
<i class="el-icon-minus" :class="{ iconNone2 : isShowicon2}" @click="expandAndCloseNode(false)"></i>
</div>
<div class="folderMain">
<p class="tipFont" :class="{ tipShow: activeTip1 }">请点击“管理目录层级—新建目录”</p>
<ul id="tree" class="ztree" :class="{ ulShow: activeTip2 }"></ul>
</div>
</div>new Vue({
el: '#appSetFast',
data: function () {
return {
// ztree配置
setting: {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "fast_id",
rootPId: 0
}
},
view: {
showLine: false,
dblClickExpand: false,
addDiyDom: this.addDiyDom,
nameIsHTML: true,
selectedMulti: false
},
callback: {
onClick: this.onNodeClick,
beforeRename: this.zTreeBeforeRename,
}
},
zNodes: []
},
methods: {
// 点击管理目录
handleCommand: function (command) {
if (command == 1) {
this.addFolder(1);
} else if (command == 2) {
this.addFolder(2);
} else if (command == 3) {
this.editNode();
} else if (command == 4) {
this.removeNode();
}
},
// 获取目录
freshArea: function () {
$.ajax({
type: 'post',
url: '/api/get_fast',
processData: false,
contentType: false,
success: res => {
this.zNodes = res.data
$.fn.zTree.init($("#tree"), this.setting, this.zNodes);
if (!this.zNodes) {
return
}
this.zNodesData();
this.selectNodes(this.nodesIds)
// 初始化模糊搜索方法
fuzzySearch('tree', '#inputSeachs', true, true)
},
error: () => {
this.tipMsg('目录获取失败！', 'error')
}
})
},
// 通过判断数组有没有字节点来显示按钮和提示
zNodesData: function () {
if (this.zNodes.length) {
this.activeTip1 = true;
this.activeTip2 = false;
this.disabledMuse = false;
} else {
this.activeTip1 = false;
this.activeTip2 = true;
this.disabledMuse = true;
}
},
// 单击选中目录并获取快捷回复条目数
onNodeClick: function (e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree"),
nodes = zTree.getSelectedNodes(),
treeNode = nodes[0];
console.log(treeNode, 44)
if(treeNode.oldname){
this.nodeNames = treeNode.oldname
}else{
this.nodeNames = treeNode.name
}
this.nodesIds = treeNode.id;
this.fastreplyId = treeNode.fastreply_id;
this.getFilePath(treeNode);
$.ajax({
type: 'get',
url: get_fast',
data: {'id': this.nodesIds},
success: res => {
this.dataTable = res.data
this.currentPage = 1
this.userListDataLimit(this.dataTable, this.currentPage);
this.userTotal = this.dataTable.length;
}, error: () => {
this.tipMsg('获取回复内容失败！', 'error')
}
})
},
// 面包屑
getFilePath: function (treeObj) {
if (treeObj == null)return '';
console.log(treeObj, 33)
if(treeObj.oldname){
var filename = treeObj.oldname
}else {
var filename = treeObj.name
}
if (filename.length > 12) {
filename = filename.substring(0, 12) + "..."
}
var pNode = treeObj.getParentNode();
if (pNode != null) {
filename = this.getFilePath(pNode) + " / " + filename;
}
this.breadcrumbArr = filename;
return this.breadcrumbArr;
},
// 搜索框聚焦事件
inputFocus: function () {
$('#inputSeachs').attr('placeholder', '')
},
// 搜索框失焦事件
inputBlur: function () {
if (this.inputSeach == '') {
$('#inputSeachs').attr('placeholder', '请输入关键字...')
}
},
// 清楚搜索框
clearInput: function () {
this.inputSeach = '';
$.fn.zTree.init($("#tree"), this.setting, this.zNodes);
},
// 新建目录
addFolder: function (e) {
var zTree = $.fn.zTree.getZTreeObj("tree"),
nodes = zTree.getSelectedNodes(),
treeNode = nodes[0];
this.newCountNode = "新建目录" + (this.newCount++);
if (treeNode) {
var parentNode = treeNode.getParentNode();
// 选中节点的条件下新建同级目录
console.log(treeNode, 22)
if (e == 1) {
if (treeNode.getParentNode()) {
this.parentNodeId = treeNode.getParentNode().id
$.ajax({
type: 'post',
url: 'add_fast',
data: {'fastreply_id': parseInt(this.parentNodeId), 'name': this.newCountNode},
success: data => {
treeNode = zTree.addNodes(parentNode, {
id: data.id, fastreply_id: data.fastreply_id, name: data.name, len: data.len
})
},
error: () => {
this.tipMsg('新建目录失败1！', 'error')
}
})
} else {
$.ajax({
type: 'post',
url: '/api/add_fast',
data: {'name': this.newCountNode},
success: data => {
treeNode = zTree.addNodes(null, {
id: data.id, fastreply_id: data.fastreply_id, name: data.name, len: data.len
})
},
error: () => {
this.tipMsg('新建目录失败2！', 'error')
}
})
}
// 新建子目录
} else if (e == 2) {
console.log(treeNode, 66)
$.ajax({
type: 'post',
url:'/api/add_fast',
data: {'fastreply_id': treeNode.id, 'name': this.newCountNode},
success: data => {
console.log(treeNode, 77)
treeNode = zTree.addNodes(treeNode, {
id: data.id, fastreply_id: data.fastreply_id, name: data.name, len: data.len
})
console.log(treeNode, 99)
console.log(this.zNodes, 88)
this.freshArea()
},
error: () => {
this.tipMsg('新建目录失败3！', 'error')
}
})
}
// 新建根目录
} else if (e != 2) {
$.ajax({
type: 'post',
url:'/api/add_fast',
data: {'name': this.newCountNode},
success: data => {
this.activeTip1 = true;
this.activeTip2 = false;
this.disabledMuse = false;
console.log(data, 322)
treeNode = zTree.addNodes(null, {
id: data.id, fastreply_id: data.fastreply_id, name: data.name, len: data.len
})
},
error: () => {
this.tipMsg('新建目录失败！', 'error')
}
})
} else if (e == 2) {
this.tipMsg('请新建目录才能新建子目录！', 'warning');
}
},
// 修改名称
editNode: function () {
var zTree = $.fn.zTree.getZTreeObj("tree"),
nodes = zTree.getSelectedNodes(),
treeNode = nodes[0];
if (nodes.length == 0) {
this.tipMsg('请选择要修改的目录！', 'warning')
return
}
this.nodesNames = treeNode.name;
if(treeNode.oldname){
treeNode.name = treeNode.oldname
}
zTree.editName(treeNode)
},
zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
if (this.nodesNames != newName) {
$.ajax({
type: 'post',
url:'/api/set_fast',
data: {'id': treeNode.id, 'name': newName},
success: res => {
this.freshArea()
},
error: () => {
this.tipMsg('名称修改失败！', 'error')
}
})
}
},
// 添加条目数
addDiyDom: function (treeId, treeNode) {
var aObj = $("#" + treeNode.tId + this.IDMark_A);
var editStr = "<span id='diyBtn_" + treeNode.id + "'>(" + treeNode.len + ")</span>";
aObj.after(editStr);
// 显示省略号
var spantxt = $("#" + treeNode.tId + "_span").html();
if (spantxt.length > 12) {
spantxt = spantxt.substring(0, 12) + "...";
$("#" + treeNode.tId + "_span").html(spantxt);
}
},
// 展开或关闭所有节点
expandAndCloseNode: function (e) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (e) {
this.isShowicon2 = false;
this.isShowicon1 = true;
} else {
this.isShowicon2 = true;
this.isShowicon1 = false;
}
zTree.expandAll(e);
},
// 提示
tipMsg: function (msg, type) {
this.$message({
message: msg,
type: type
});
},
// 删除选中的节点
removeNode: function () {
var zTree = $.fn.zTree.getZTreeObj("tree"),
nodes = zTree.getSelectedNodes();
if (nodes.length == 0) {
this.tipMsg('请选择要删除的目录！', 'warning')
return
} else {
this.delTip = '您是否确认要删除当前目录';
this.activeShadow1 = false;
this.activeShadow2 = true;
this.activeShadow3 = false;
this.flagSure = 1;
}
},
// 删除框确认按钮
sureRemove: function () {
if (this.flagSure == 1) {
var zTree = $.fn.zTree.getZTreeObj("tree"),
nodes = zTree.getSelectedNodes(),
treeNode = nodes[0];
$.ajax({
type: 'post',
url: '/api/del_fast',
data: {'id': treeNode.id},
success: data => {
zTree.removeNode(treeNode);
this.activeShadow1 = true;
this.activeShadow3 = true;
this.breadcrumbArr = ''
this.freshArea()
},
error: () => {
this.tipMsg('删除失败！', 'error')
}
})
} else if (this.flagSure == 2) {
$.ajax({
type: 'post',
url: '/api/del_fast',
data: {'id': this.listId},
success: data => {
this.activeShadow1 = true;
this.activeShadow3 = true;
this.freshArea()
this.onNodeClick()
}, error: () => {
this.tipMsg('删除失败！', 'error')
}
})
} else if (this.flagSure == 3) {
this.activeShadow1 = true;
this.activeShadow3 = true;
$('.uploadPortrait').click()
}
},
// 获取数据后根据id重新选中节点
selectNodes: function (id) {
var zTree = $.fn.zTree.getZTreeObj("tree"),
nodes = zTree.transformToArray(zTree.getNodes());
for(var i=0; i<nodes.length; i++){
if(id == nodes[i].id){
zTree.selectNode(nodes[i], true)
if(nodes[i].fastreply_id){
zTree.expandNode(nodes[i], true, false)
}
}
}
},上面每一个方法都有注释，一看便知。如果要做搜索功能的童鞋需要注意引入 fuzzySearch（'tree', '#inputSeachs', true, true）插件，这个官网的demo有很详细的介绍，下载源码就可。如果每个层级目录需要添加自己的内容，可以仔细看下上面这个addDiyDom() 函数，使用的相关方法一定要在data中的setting：{}中配置，否则不会生效。ztree插件是我使用过最完美的插件之一，在此感谢作者开发这么强大的插件！
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献16条内容
所有评论(0)