var zTreeObj;
var setting = {
data: {
key: {
children: "Child_List",//变更默认的children属性名
name: "TName"//变更默认的name属性名
},
simpleData: {
enable: true,
idKey: "TID",//自己的id,更改id的属性名
pIdKey: "PID",//父级id,更改父级的属性名
}
},
view:{
dblClickExpand : false//关闭双击节点展开的功能,在点击事件中实现展开闭合切换
},
callback: {
onClick: onOneClick,//单击事件
// onDblClick: onTwoClick,//双击事件
onExpand: zTreeOnExpand,//+号展开事件
}
};
function onOneClick(e, treeId, treeNode) {
if(treeNode.Level == 2){
//Level==2此级可以弹窗
$(".background").show();
$("#TuCe").show();
zTreeObj.expandNode(treeNode,true);//单击展开节点,此状态下之展开不闭合
if(treeNode.Child_List == null){
//不为null可以请求下一级数据
vm.getzTreeData2(treeNode)
}
}else if(treeNode.Level >= 3){
//Level>=3没有弹窗功能,只能请求下一级数据
if(treeNode.Child_List == null){
vm.getzTreeData2(treeNode)
}
//单击展开折叠切换节点,focus=false不设置任何焦点(防止树抖动)
zTreeObj.expandNode(treeNode,null,null,false);
}else{
zTreeObj.expandNode(treeNode,null,null,false);
}
}
function onTwoClick(e, treeId, treeNode) {
console.log(2)
}
function zTreeOnExpand(e, treeId, treeNode){
//点击+号,只请求数据不弹窗
if(treeNode.Level == 2 && treeNode.Child_List == null){
vm.getzTreeData2(treeNode)
}else if(treeNode.Level >= 3 && treeNode.Child_List == null){
vm.getzTreeData2(treeNode)
}
}
var vm = new Vue({
el:'#app',
data:{
zNodes:[],//首次获取的树
},
created(){},
mounted(){
this.getzTreeData()
},
methods:{
//获取首次树1-2级数据
getzTreeData(){
var self = this
$.ajax({
type: 'POST',
url: '',
data: {},
async: true,
dataType: "json",
success: function (msg) {
if (msg.status.code == 1) {
var info = msg.row_data.record;
//给2级的设置isParent值,否则没有+号
$(info).each(function(index,item){
$(item.Child_List).each(function(ind,it){
if(it.Level == 2){
it.isParent = true;//设置为父节点,带+号
}
})
})
//设置静态的顶级
var obj = {
TID: 0,//自己的id
PID: 0,//父级的id
Level: 0,//Level等级
TName: msg.data,//本节点显示名称
open: true,//本节点展开
Child_List: info//本节点子集
}
self.zNodes.push(obj)
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, self.zNodes);
// zTreeObj.expandAll(true);//展开 全部节点
}
else {
dialog("提示", msg.status.msg, 2);
}
},
error: function (a, b, c) {
alert(c);
}
});
},
//点击树节点获取子节点数据
getzTreeData2(treeNode){
var self = this
$.ajax({
type: 'POST',
url: '',
data: {},
async: true,
dataType: "json",
success: function (msg) {
if (msg.status.code == 1) {
var info = msg.row_data.record;
var addtreeObj = $.fn.zTree.getZTreeObj("treeDemo");//获取到树
if(info.length != 0){
//将获取的都设置isParent值,否则没有+号
$(info).each(function(index,item){
if(item.Level >= 3){
item.isParent = true;//设置为父节点,带+号
}
})
var parentZNode = addtreeObj.getNodeByParam("TID", treeNode.TID, null);//获取指定父节点
var newNode = addtreeObj.addNodes(parentZNode,info);//添加节点(父节点,新数据)
}else{
//如果没有子集,将当前节点设置为非父级,并且给Child_List赋值[],防止再次请求
treeNode.isParent = false;
treeNode.Child_List = [];
addtreeObj.updateNode(treeNode);//更新节点数据
}
}
else {
dialog("提示", msg.status.msg, 2);
}
},
error: function (a, b, c) {
alert(c);
}
});
}
}
})