2021-04-19前端框架Ztree整理

ztree官网:http://www.treejs.cn/v3/api.php

ztree是我目前接触到的功能最全的一个树型UI组件(对比与element ui 和 layui 的树型组件);
ztree的实现思想:
1:绑定一个DOM元素,设置它的配置,传入数据
(与其他两个不同的是:传入的数据不需要的树型数据,一个数组里面都是对象就行)

var nodes = [
	{id:1,pId:0,name:'我的id是1'},
	{id:2,pId:0,name:'我的id是2'},
	{id:3,pId:1,name:'我的id是3'},
];

这样的节点传入,id3就会成为id1的子节点

部分应用场景:
1:人员管理(部门之间有父子级关系,人员部门之间有父子级关系)
2:地域管理(省市区之间有父子级关系)
3:数据排序(ztree树的拖动)
4:人员(部门)选择插件

下面以人员管理展示为例来配置ztree,
假设从接口得到数据:

var data = [
	{code:'370305',	mc:'临淄部门',father_code:'370000',number:'30人'},
	{code:'370303',	mc:'张店部门',father_code:'370000',number:'40人'},
	{code:'370000',	mc:'淄博部门',father_code:'',number:'100人'},
	{code:'370305199711111111',	mc:'张三',father_code:'370305'},
	{code:'370305199711111112',	mc:'李四',father_code:'370303'},
	{code:'370303199711111111',	mc:'王五',father_code:'370303'},
];

1:ztree中默认是按照id,pId匹配父子级关系(注意区分大小写),name来显示名称,如果返回的数据并不是这样的,
那么有两种处理方式:
方式1(for循环处理返回的数据):

var nodes = [];
for(let i=0,i<data.length;i++){
	nodes.push({
		id:data[i].code,
		name:data[i].mc,
		pId:data[i].father_code,
		number:data[i].number
	})
}

方式2(在settings对象中设置):

let settings={
	data:{
		simpleData:{
			enable:true, // 默认false,这里设置为tree
			rootPId:'', // 设置根节点的pid
			idKey:'code', // 设置id对应属性
			pIdKey:'father_code', // 设置pid对应属性
		},
		key:{
			name:'mc', // 设置名称对应属性
			title:'mc', // 鼠标移入显示的文本
		}
	}
}

上面只是配置ztree树的展示数据
下面以人员选择为例来配置ztree树,涉及ztree树的单选/多选,默认数据的勾选回显,ztree节点被点击以及鼠标移入出现增删改按钮等

	let settings={
	data:{
		view:{
			nameIsHTML:true, // name属性是否以HTML来解析
			showTitle:false, // 鼠标移入是否显示文本
		},
		simpleData:{
			enable:true, // 默认false,这里设置为tree
			rootPId:'', // 设置根节点的pid
			idKey:'code', // 设置id对应属性
			pIdKey:'father_code', // 设置pid对应属性
		},
		key:{
			name:'mc', // 设置名称对应属性
			title:'mc', // 鼠标移入显示的文本
		},
		check:{
			enable:true, // 节点是否可以勾选
			chkStyle:'checkbox', // 单选:radio,复选:checkbox
			radioTyle:'all', // 全局只能选一个:'all',一个父级能选一个:'level'
			chkboxType:{Y:'s',N:'s'}, // 选择父级会自动勾选所有子节点,{Y:'',N:''}:选择父级不会自动勾选子节点
		},
		callback:{
			onclick:ztreeOnclick, // ztree被点击时触发 event(事件),dom(dom元素),node(节点)
			oncheck:ztreeOncheck,// ztree被勾选时触发 event(事件),dom(dom元素),node(节点)
		}
	}
}
// 补充:如果不想让节点出现选择框:在节点增加属性:nocheck:true
// 如果想让节点更换icon,在节点增加属性: icon:src
/**
* 1:event:事件
* 2:dom的id
* 3:被点击的节点
* 该回调函数用来点击树节点就可以勾选数据,而不用点击节点前的复选框
*/
function ztreeOnclick(event,dom,node){
	let treeObj = $.fn.zTree.getZTreeObj('ztree'); // 根据DOM的ID来获取已经存在的ztree对象
	//ztree对象勾选方法,1:需要勾选的节点,2:是勾选还是取消勾选,3:是否关联选择父子节点
	treeObj.checkNode = (node,node.checked,true); 
}

let checkedArr = [];
/**
* 1:event:事件
* 2:dom的id
* 3:被点击的节点
* 该回调函数用来勾选时将数据放入勾选好的数组中,或者从选择好的数组中去掉该节点
*/
function ztreeOncheck(event,dom,node){
	let treeObj = $.fn.zTree.getZTreeObj('ztree');
	if(node.checked){
		// 勾选时
		checkedArr.push(node);
	}else{
		// 取消勾选时
		for(let i=0;i<checkedArr.length;i++){
			if(checkedArr[i].code === node.code){
				checkedArr.splice(i,1);
				break;
			}
		}
	}
}

var defaultData = [
	{code:'370303199711111111',	mc:'王五',father_code:'370303'},
];
/**
* data:默认数据
* 该函数用来页面加载完成后自动勾选上默认数据
*/
function initDefaultData(defaultData){
	let treeObj = $.fn.zTree.getZTreeObj('ztree'); 
	let node = null;
	for(let i=0;i<data.length;i++){
		node = treeObj.getNodeByParam('code',data[i].code,null);
		if(node){
			treeObj.checknode(node,true,true);
		}
	}
}