当前位置：首页 > news >正文

vue 引入zTree

news 2025/8/4 9:25:33

下载js包解压后找个地方放文件夹内

引入

import "@/common/zTree/js/jquery-1.4.4.min"
import "@/common/zTree/js/jquery.ztree.core.min.js"
import "@/common/zTree/js/jquery.ztree.excheck.min.js"
import "@/common/zTree/css/metroStyle/metroStyle.css"

<div id="treeDemo" class="ztree"></div>

初始化

 this.ztreeObj = $.fn.zTree.init($("#treeDemo"), this.setting,this.treeData);

treeData：自己的原始数据，树结构数据，setting：设置
原始数据中，每一层添加open:true，即可自动展开
添加checked：true 即可默认选中

setting: {treeId: "id",data: {simpleData: {enable: true,idKey:'sid',pIdKey:'pid',rootPId:'-'},key:{isParent: "parent",name:'projectName', //需要显示的字段名称title:'projectName'},},check:{enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框nocheckInherit:true  //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true },callback: {// 树的点击事件onClick: this.zTreeOnClick,//点击回调onCheck: this.oncheck, //点击选中 checkboxonAsyncSuccess: this.zTreeOnAsyncSuccess,//异步加载成功的funbeforeAsync: this.zTreeBeforeAsync,//异步加载前的回调onExpand: this.expandNode//节点展开回调},edit: {//是否支持拖拽，enable我改成了false,代表此功能禁用，也可以直接删除，为了防止后续他们提这个需求，所以我还是写上了drag: {isMove: true,prev: true,next: true,inner: true},enable: false,showRemoveBtn: false,showRenameBtn: false},view:{// addHoverDom:this.addhoverdom,//ztree提供的可以自定义添加dom// removeHoverDom:this.removehoverdom,//和addHoverDom成对出现，离开节点时需要移除自定义的dom// fontCss: function (treeId, treeNode) {//设置所有节点的样式，我这里的代码的意思是，当前节点是否高亮（树节点搜索的时候会高亮命中的节点），高亮就设置节点高亮样式，否则就是普通样式//     return (!!treeNode.highlight) ? {'backgroundColor':'#F6F7F8','display':'inline-block','width':'95%','min-width':'225px','padding':'3px 0'} : {//             color: "#000000", "font-weight": "normal"//         };// },showTitle:true //是否显示titie属性（就是鼠标放到节点上是否显示html元素的title属性）},// async:{//节点很多的情况下设置懒加载//     enable:true,//是否开启异步加载模式//     contentType: "application/json",//Ajax 提交参数的数据类型//     dataType: "json",//Ajax 获取的数据类型//     // url:'/aa/bbb/ccc/loadTree',//点击树的展开节点，会重新加载子节点，这里是请求的url地址//     type:'POST',//当前的请求类型//     // autoParam:['id=parentId'],//将节点的pId值作为参数传递//     // otherParam:{'userId':()=>{return this.userId;},'userName':()=>{return this.userName;},'tenantId':()=>{return this.tenantId;}}//     otherParam:{'userId':this.userId,'userName':this.userName,'tenantId':this.tenantId,'parentId':'-'},//每次异步请求携带的参数//     dataFilter:function(treeId, parentNode, resp){//         sessionStorage.setItem('tongbunodes',JSON.stringify(resp.jsSubjects.children));//         return resp.subjects;//     }//对 Ajax 返回数据进行预处理的函数,就是异步加载返回的数据你可以处理一下再用// }

//点击
zTreeOnClick(event, treeId, treeNode){if(allSid.indexOf(treeNode.proid) != -1){this.ztreeObj.checkNode(treeNode, false, true);//取消勾选}else{            this.ztreeObj.checkNode(treeNode, true, true);//勾选}
}
//选中oncheck(event, treeId, treeNode){}