zTree加Layui 实现增加和删除，有子节点不允许删除

引入zTree文件

	<link rel="stylesheet" th:href="@{/zTree_v3/css/zTreeStyle/zTreeStyle.css}" />
	<script th:src="@{/zTree_v3/js/jquery.ztree.all.js}" type="text/javascript"></script>

div 部分

<div class="mainbox">
	<!--  隐藏域-->
	<input type="hidden" id="id" th:value="${id}">
	<div style="height: 550px;overflow: auto;" id="toolbarDiv">
		<ul id="tree-sorts" class="ztree" style="width:230px; overflow:auto;"></ul>
	</div>
</div>

js 部分

//获取隐藏域id
	var id = $("#id").val();
	$(function () {
		onLoadZTree();
	})
	//树状图配置
	var setting = {
		view: {

			dblClickExpand: false,
			showLine: false,
			selectedMulti: false,
			addHoverDom: addHoverDom, //显示按钮
			removeHoverDom: removeHoverDom, //隐藏按钮
		},
		edit: {
			showRenameBtn: false,//隐藏修改按钮
			enable: true,
			editNameSelectAll: true,
			removeTitle: '删除',
			showRemoveBtn: showRemoveBtn,
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "id",
				pIdKey: "pId",
				rootPId: "0"
			}
		},
		callback: {
			beforeRemove: beforeRemove, //点击删除时触发，用来提示用户是否确定删除
		}
	};

	function onLoadZTree() {
		$.ajax({
			async: false, //是否异步
			cache: false, //是否使用缓存
			type: 'POST', //请求方式：post
			url: 'findProblemById?id=' + id, //请求的路径
			success: function (data) {
				treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes
			}
		});
		var t = $("#tree-sorts");
		t = $.fn.zTree.init(t, setting, treeNodes);
		t.expandAll(true);
	}
	//跟节点返回false,所以跟节点不显示删除按钮。
	function showRemoveBtn(treeId, treeNode) {
		return !treeNode.level == 0;
	}

	//新增
	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='新增' οnfοcus='this.blur();' style='background-position: -145px -1px;'></span>";
		sObj.after(addStr);
		var btn = $("#addBtn_" + treeNode.tId);
		if (btn) btn.bind("click", function () {
			var zTree = $.fn.zTree.getZTreeObj("tree-sorts");
			layer.prompt({
				formType: 0,
				value: '',
				//给标题添加样式
				title: ['请输入CRT', 'background:#0177d5;color:#FFF;font-size: 18px;'],
			}, function (value, index) {
				if (value.trim().length === 0) {//非空验证
					return false;
				}
				layer.close(index)
				var pid = treeNode.id;
				var name = value;
				$.ajax({
					type: "POST",
					async: false,
					url: "insertCrtTree",
					data: {
						"pid": pid,
						"name": name,
						'proId': id,
					},
					success: function (data) {
						if (data.code == 0) {
							zTree.addNodes(treeNode, {
								pId: treeNode.id,
								name: value
							});
							onLoadZTree() //重新加载，不然再次添加会报错
							layer.msg(data.tipMsg, {
								title: ['提示', 'background:#0177d5;color:#FFF;font-size: 18px;'],
								icon: 1,
								time: 1000
							});
						} else {
							onLoadZTree()
							layer.msg('添加失败！', {
								title: ['提示', 'background:#0177d5;color:#FFF;font-size: 18px;'],
								icon: 5,
								time: 1000
							});
						}
					}
				});
			});

		});
	};
	//移除鼠标隐藏按钮
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_" + treeNode.tId).unbind().remove();
	}
	// 先删除子节点,在删除父节点
	function beforeRemove(treeId, treeNode) {
		if (treeNode.children && treeNode.children.length > 0) {
			layer.msg('请首先删除子节点', {
				icon: 5,
				time: 1000
			});
			return false;
		}
		layer.confirm('确认要删除吗？', {
			title: ['删除CRT', 'background:#0177d5;color:#FFF;font-size: 18px;'],
			btn: ['确定', '取消'],
			closeBtn: 0,
		}, function (index) {
			$.ajax({
				type: "POST",
				async: false,
				url: "deleteCrtTree",
				data: {
					"id": treeNode.id,
				},
				success: function (data) {
					if (data.code == 0) {
						onLoadZTree() //重新加载，不然再次添加会报错
						layer.msg(data.tipMsg, {
							title: ['提示', 'background:#0177d5;color:#FFF;font-size: 18px;'],
							icon: 1,
							time: 1000
						});
						return true;
					} else {
						onLoadZTree()
						layer.msg('删除失败！', {
							title: ['提示', 'background:#0177d5;color:#FFF;font-size: 18px;'],
							icon: 5,
							time: 1000
						});
						return false;
					}
				}
			});
			layer.close(index);
		},
			function () {//取消时刷新tree
				onLoadZTree()
				layer.msg('已取消', {
					icon: 6,
					time: 1000
				});
				return false;
			},
		);
	}