ztree懒加载以及ztree增加修改删除节点

 1、定义setting

var setting = {
	edit:{
		enable:true,
		showRemoveBtn:true, //显示删除按钮
		showRenameBtn:true, //显示编辑按钮
		removeTitle: "删除节点",
		renameTitle: "编辑节点名称",
	},
	view: {
		selectedMulti: false, //是否允许多选
		showIcon: false,
		addHoverDom:addHoverDom, //鼠标悬停添加添加节点
		removeHoverDom:removeHoverDom //鼠标离开删除添加节点
	},
	data: {
		simpleData: {
			enable: true
		}
	},
	check: {
		enable: false
	},
	callback: {
		onClick:treeClickEvent,//点击后懒加载展开子节点
		onRemove:treeRemoveEvent, //删除节点回调
		onRename:treeRenameEvent, //修改节点名称回调
	},
	async:{
		enable:true,//懒加载关键
		url:systemConfig.baseServerUrl + "/OrganizationalStructure/selectStructure?token=" + systemConfig.token, //请求子节点的接口
		autoParam: ["id=pid"], //单独写["id"]说明服务参数名称是id，写id=pid说明服务端接收的参数名称是pid 都是将点击的节点id传过去
		contentType: "application/json; charset=UTF-8",
		dataFilter: function (treeId, parentNode, responseData) {//服务端请求完成的回调
			if(responseData.code == 1){
				childrenData = responseData.data;
				childrenData.forEach(function (item,index) {
					labelTree.addNodes(parentNode,item);  //添加节点
				});
				var childNodes = parentNode.children;
				childNodes.forEach(function (item,index) {
					item.isParent = isChildren(item.id); //判断是否有子节点
				});
				labelTree.refresh();//刷新树
			}else{
				parentNode.isParent = false;
				parentNode.icon = "";
				labelTree.refresh();
			}
		}
	}
};

2、请求第一级数据

function getAlltreeCompile() {
	var requestPath = systemConfig.baseServerUrl + "/OrganizationalStructure/selectStructure?token=" + systemConfig.token;
	var layerLoad = layer.load(0, {shade: [0.4, '#fff']});
	jPost(requestPath, JSON.stringify({"pid": 0}), function (data) {
		if (data.code == 1) {
			if(data && data.data.length){
				var first = [];
				for (var i = 0; i < data.data.length; i++) {
					if(data.data[i].position && data.data[i].position.split("/").length == 1){
						first.push(data.data[i]);
					}
				}
				zNodes = [];
				first.forEach(function (item, index, arr) {
					var firstObj = {
						"id": item.id,
						"pId": item.pid ? item.pid : 0,
						"name": item.name,
						"open": true,
						"position":item.position
					};
					if (!item.pid) {
						firstObj.open = true;
					}
					zNodes.push(firstObj);
				});
				labelTree = $.fn.zTree.init($("#treeOrganization"), setting, zNodes);
				var nodes = labelTree.transformToArray(labelTree.getNodes());
				nodes.forEach(function (item,index) {
					item.isParent = isChildren(item.id);
				});
				labelTree.refresh();
			}else{
				layer.msg("当前没有编制信息");
			}
		}
		layer.close(layerLoad);
	});
}

3、当鼠标点击节点，显示子节点

function treeClickEvent(event, treeId, treeNode) {
	treeNode.isParent = true;
	labelTree.reAsyncChildNodes(treeNode, "refresh");
}

4、添加功能按钮显示

function addHoverDom(treeId,treeNode) {
	var that = this;
	var sObj = $("#" + treeNode.tId + "_span");
	if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0){
		return;
	}
	var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='添加子节点' onfocus='this.blur();'></span>";
	sObj.after(addStr);
	var btn = $("#addBtn_"+treeNode.tId);
	if (btn){
		//点击调用添加节点接口
		btn.bind("click", function(event){
			event.stopPropagation();
			$("#new_organization").val("");
			layer.open({
				type: 1,
				title:false,
				skin:"user_roleBounced",
				area: ['20%', '20%'],//宽高
				resize: false,//是否允许拉伸 默认：true
				content:$('#addOrganization'),
				btn: ['确定', '取消'],
				zIndex:1000,
				yes: function (index, layero) {
					if(!$("#new_organization").val()){
						layer.msg("名称不能为空");
						return;
					}
					//调用添加接口
				},
				btn2: function (index, layero) {
					layer.closeAll();
					//取消
				},
				cancel: function () {
					layer.closeAll();
					//右上角关闭回调
				}
			});
		})
	}
}

5、添加功能按钮隐藏

function removeHoverDom(treeId,treeNode) {
	$("#addBtn_"+treeNode.tId).unbind().remove();
}

6、删除功能

function treeRemoveEvent(event, treeId, treeNode) {
	//调删除接口
}

7、编辑功能

function treeRenameEvent(event, treeId, treeNode, isCancel) {
	//调编辑接口
}

8、判断是否有子级

function isChildren(id) {
	var result = false;
	var requestPath = systemConfig.baseServerUrl + "/OrganizationalStructure/selectStructure?token=" + systemConfig.token;
	jPost(requestPath, JSON.stringify({"pid": id}), function (data) {
		if (data.code == 1) {
			if(data && data.data.length){
				result = true;
			}else{
				result = false;
			}
		}else{
			result = false;
		}
	});
	return result;
}