下载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, //点击选中 checkbox
onAsyncSuccess: this.zTreeOnAsyncSuccess,//异步加载成功的fun
beforeAsync: 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){
}