vue3+ts+ztree
新公司 要用新技术 vue3+ts 一切从头学 最近要引一个树的插件 ztree 所以把遇到的问题 都记下来
一、ztree
找了无数个tree的插件，最后被ztree征服，主要是他的官网的demo简直太厉害了，想要的功能几乎都能复现出来，贴上网址：http://www.treejs.cn/v3/main.php#_zTreeInfo
我用到的功能就是拖拽 两棵树之间互相拖 ztree YYDS
二、开始
1.引入
因为ztree是jQuery插件 所以不仅得引入ztree 也得引入jQuery
npm install @ztree/ztree_v3
npm i jquery
//然后在main.ts 中引入
import '@ztree/ztree_v3/js/jquery-1.4.4.min.js'
import '@ztree/ztree_v3/js/jquery.ztree.core.min.js'
import '@ztree/ztree_v3/js/jquery.ztree.excheck.min.js'
import '@ztree/ztree_v3/js/jquery.ztree.exedit.min.js'
// import '@ztree/ztree_v3/css/metroStyle/metroStyle.css'
import '@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css'
//引入之后 可能会报找不到jQuery 这个时候要下载npm install @types/jquery
//这个js引入的顺序 一定不能变奥 因为我就在这碰过壁 咋写都写不出来 结果是顺序变了
然后需要在vue.config.ts 中配置一下jQuery 不然会报错：
const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
},
})
这里要配置webpack的 就是自己建立一个 webpack.config.js 这也是打包的关键了
写树
我建议把官网的demo下载出来 这样在本地看非常方便
这个文件夹里的HTML 就是所有需要用到的功能文件 然后去对比官网的demo路径就能找到
下面贴出vue页面 整个代码 我这个写的是两棵树互拖 里面会有注释
<template>
<!-- vue3页面 -->
<div class="about-wrap">
<h1>测试树结构</h1>
<div class="btnwrap">
<a id="addLeaf" href="#" title="增加叶子节点" onclick="return false;">增加叶子节点</a>
<a id="remove" href="#" title="删除节点" onclick="return false;">删除节点</a>
</div>
<div class="content_wrap">
//这里的class="ztree"必须要写的 显示不出
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul id="treeDemo2" class="ztree"></ul>
</div>
</div>
</div>
</template>
<script lang='ts'>
import { defineComponent, onMounted, reactive } from 'vue'
import $ from 'jquery';
export default defineComponent({
name: 'App',
props :{
},
setup(props) {
//以下 都是ts的写法 因为要配置类型 可以和ztree官方的做对比 其实差不多 就是多了类型 我都写了any 但后期一定要改
let onDrag =(event:any, treeId:any, treeNodes:any)=> {
alert(treeNodes.length);
};
let onDrop = (event:any, treeId:any, treeNodes:any, targetNode:any, moveType:any)=>{
alert(treeNodes.length + "," + (targetNode ? (targetNode.tId + ", " + targetNode.name) : "isRoot" ));
};
let beforeDrag=(treeId:any, treeNodes:any)=> {
console.log(treeId, treeNodes,'beforeDrag');
for (var i=0,l=treeNodes.length; i<l; i++) {
if (treeNodes[i].drag === false) {
return false;
}
}
return true;
}
let beforeDrop=(treeId:any, treeNodes:any, targetNode:any, moveType:any)=> {
console.log(treeId,'b drop');
return targetNode ? targetNode.drop !== false : true;
}
let showCode=(id:any, str:any)=> {
var code = $("#code" + id);
code.empty();
for (var i=0, l=str.length; i<l; i++) {
code.append("<li>"+str[i]+"</li>");
}
}
let setCheck=()=> {
let tree:any = $.fn;
var zTree = tree.zTree.getZTreeObj("treeDemo"),
isCopy = $("#copy").attr("checked"),
isMove = $("#move").attr("checked"),
prev = $("#prev").attr("checked"),
inner = $("#inner").attr("checked"),
next = $("#next").attr("checked");
zTree.setting.edit.drag.isCopy = isCopy;
zTree.setting.edit.drag.isMove = isMove;
showCode(1, ['setting.edit.drag.isCopy = ' + isCopy, 'setting.edit.drag.isMove = ' + isMove]);
zTree.setting.edit.drag.prev = prev;
zTree.setting.edit.drag.inner = inner;
zTree.setting.edit.drag.next = next;
showCode(2, ['setting.edit.drag.prev = ' + prev, 'setting.edit.drag.inner = ' + inner, 'setting.edit.drag.next = ' + next]);
}
let newCount = 1;
let trees:any = $.fn;
// 增加子节点
let add=(e:any)=>{
var zTree = trees.zTree.getZTreeObj("treeDemo"),
isParent = e.data.isParent,
nodes = zTree.getSelectedNodes(),
treeNode = nodes[0];
if (treeNode) {
treeNode = zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, isParent:isParent, name:"new node" + (newCount++)});
} else {
treeNode = zTree.addNodes(null, {id:(100 + newCount), pId:0, isParent:isParent, name:"new node" + (newCount++)});
}
if (treeNode) {
zTree.editName(treeNode[0]);
} else {
alert("叶子节点被锁定，无法增加子节点");
}
};
// 删除子节点
let remove = (e:any) => {
var zTree = trees.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getSelectedNodes(),
treeNode = nodes[0];
if (nodes.length == 0) {
alert("请先选择一个节点");
return;
}
var callbackFlag = $("#callbackTrigger").attr("checked");
zTree.removeNode(treeNode, callbackFlag);
};
//在这里要配置树所用到的功能 官网写的非常清楚了
var setting = {
edit: {
enable: true,
// 显示删除按钮
showRemoveBtn: true,
// 显示更改名称按钮
showRenameBtn: true
},
data: {
simpleData: {
enable: true
}
},
view: {
showLine: false
},
callback: {
beforeDrag: beforeDrag,
beforeDrop: beforeDrop
}
};
// 数据格式 可以是这样并列的 也可以是json嵌套的那种
var zNodes =[
{ id:1, pId:0, name:"父节点 1", open:true},
{ id:11, pId:1, name:"叶子节点 1-1"},
{ id:12, pId:1, name:"叶子节点 1-2"},
{ id:13, pId:1, name:"叶子节点 1-3"},
{ id:2, pId:0, name:"父节点 2", open:true},
{ id:21, pId:2, name:"叶子节点 2-1"},
{ id:22, pId:2, name:"叶子节点 2-2"},
{ id:23, pId:2, name:"叶子节点 2-3"},
{ id:3, pId:0, name:"父节点 3", open:true},
{ id:31, pId:3, name:"叶子节点 3-1"},
{ id:32, pId:3, name:"叶子节点 3-2"},
{ id:33, pId:3, name:"叶子节点 3-3"}
];
onMounted(()=>{
ss();
});
let ss= ()=>{
$(document).ready(function(){
// 这句话要写 要配置类型 因为在jQuery里是找不到ztree的
// 配置为any类型就不报错了 这个问题困扰了我两天 就这一句话
let tree:any = $.fn;
// $("#copy").bind("click", copy);
// $("#cut").bind("click", cut);
// $("#paste").bind("click", paste);
tree.zTree.init($("#treeDemo"), setting, zNodes);
tree.zTree.init($("#treeDemo2"), setting);
$("#addLeaf").bind("click", {isParent:false}, add);
$("#remove").bind("click", remove);
});
}
//vue3 的形式 只要定义了 所有的都得return出来 不然找不到
return {
setting,
zNodes,
ss,
beforeDrag,
beforeDrop,
setCheck,
showCode,
add,
}
}
})
</script>
<style lang='less' scoped>
//这里就是写的树的样式了 自己随意改
// @import '../../public/css/demo.css';
@import '../../public/css/zTreeStyle.css';
.about-wrap{
width:100%;
height: 100%;
.btnwrap{
display: flex;
justify-content: space-around;
color: #222;
font-size: 16px;
padding-bottom: 20px;
a{
cursor: pointer;
}
}
.treewrap{
width: 100%;
height: 100%;
display: flex;
}
.left{
width: 50%;
height: 100%;
margin: 0 auto;
float: none !important;
border: solid pink;
}
.right{
width: 50%;
height: 100%;
border:solid forestgreen
}
}
</style>
最后的呈现（左右随便来回拖 我不会放GIF 反正是这个意思 ）
这才刚刚开始 以后问题还多着呢！
