ztree 实现树的增删改

效果图：

前端js

var setting = {
	view: {
		addHoverDom: addHoverDom,
		removeHoverDom: removeHoverDom,
		selectedMulti: false
	},
	edit: {
		enable: true,
		editNameSelectAll: true
	},
	data: {
		simpleData: {
			enable: true
		}
	},
	callback: {
		onClick:clickTree,
		beforeDrag: beforeDrag,
		beforeEditName: beforeEditName,
		beforeRemove: beforeRemove,
		beforeRename: beforeRename,
		onRemove: onRemove,
		onRename: onRename
	}
};

var log, className = "dark";
function beforeDrag(treeId, treeNodes) {
	return false;
}
function beforeEditName(treeId, treeNode) {
	className = (className === "dark" ? "":"dark");
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	zTree.selectNode(treeNode);
	setTimeout(function() {
		setTimeout(function() {
			zTree.editName(treeNode);
		}, 0);
	}, 0);
	return false;
}
function clickTree(event,treeId,treeNode){
	alert(treeNode.id);
}
// 删除
function beforeRemove(treeId, treeNode) {
	var flag = false;
	ws.tools.ajaxRequest({
		url : SystemGlobal.baseUrl+"/toutiao/document_file/deleteDocument/"+treeNode.id,
		dataType : 'json',
		type : 'get',
		successfun : function(response) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			flag = true;
		},
		errorfun : function() {
			ws.tools.modalDialog.alert('请求失败！',2);
		}
	});
	return flag;
}
function onRemove(e, treeId, treeNode) {}

// 重命名
function beforeRename(treeId, treeNode, newName, isCancel) {
	if (newName.length == 0) {
		setTimeout(function() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.cancelEditName();
			ws.tools.modalDialog.alert('名称不能为空！',2);
		}, 0);
		return false;
	}else{
		ws.tools.ajaxRequest({
			url : SystemGlobal.baseUrl+"/toutiao/document_file/updateDocument/",
			dataType : 'json',
			type : 'post',
			data :{"id":treeNode.id,"name":newName},
			successfun : function(response) {
			},
			errorfun : function() {
				ws.tools.modalDialog.alert('请求失败！',2);
			}
		});
	}
	return true;
}
function onRename(e, treeId, treeNode, isCancel) {}

// 添加
function addHoverDom(treeId, treeNode) {
	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='add node' onfocus='this.blur();'></span>";
	sObj.after(addStr);
	var btn = $("#addBtn_"+treeNode.tId);
	if (btn) btn.bind("click", function(){
		ws.tools.ajaxRequest({
			url : SystemGlobal.baseUrl+"/toutiao/document_file/addDocument/",
			dataType : 'json',
			type : 'post',
			data :{"pId":treeNode.id,"name":"新建文件夹","open":"false"},
			successfun : function(response) {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.addNodes(treeNode, response.data);
			},
			errorfun : function() {
				ws.tools.modalDialog.alert('请求失败！',2);
			}
		});
		return false;
	});
};
function removeHoverDom(treeId, treeNode) {
	$("#addBtn_"+treeNode.tId).unbind().remove();
};
function selectAll() {
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
}
//获取数据
function getData(){
	var data = null;
	var url = SystemGlobal.baseUrl+"/toutiao/document_file/getDocumentTree/";
	ws.tools.ajaxRequest({
		url : url,
		dataType : 'json',
		type : 'get',
		successfun : function(response) {
			if (response.status == 0) {
				 data = response.data;
			}else{
				ws.tools.modalDialog.alert(response.msg,2);
			}
		},
		errorfun : function() {
			ws.tools.modalDialog.alert('请求失败！',2);
		}
 	});
	return data;
}
$(document).ready(function(){
	var data = getData(); // zNodes
	$.fn.zTree.init($("#treeDemo"), setting, data);
	
});

数据库：

相信后端大家都会写

有喜欢的朋友可以关注下头条号《老徐聊技术》