easyUI入门《十二、tree案例：结合后台对数进行增删改查》

本文链接：https://blog.csdn.net/leijiahui/article/details/82388966

本文档详细介绍了如何使用easyUI结合SpringBoot和MyBatis实现后台获取JSON树结构，并展示了如何实现树节点的增删改查功能，包括选中状态处理、拖拽修改、树节点编辑及多选删除等操作。

摘要由CSDN通过智能技术生成

GitHub：https://github.com/touchxfzl/springboot-mybatis-easyUI

实现后台获取json树

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!--引入基本库-->
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/default/easyui.css" />
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/icon.css" />
	</head>

	<body>

		<ul id="tree">

		</ul>

		<script type="text/javascript">
			$("#tree").tree({
				checkbox: true, //复选框
				collapseAll:true,
				cascadeCheck: false, //级联选中：false
				//onlyLeafCheck: true, //只是叶子节点有复选框
				url: "http://localhost:8080/getTree",
				method: "get",
			})
		</script>
	</body>

</html>

弹出：选中+半选中+选中和半选中+未选中，的树节点

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!--引入基本库-->
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/default/easyui.css" />
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/icon.css" />
	</head>

	<body>
		<input type="button" value="全选" onclick='alertNode($("#tree").tree("getChecked"))' />
		<input type="button" value="半选" onclick='alertNode($("#tree").tree("getChecked","indeterminate"))' />
		<input type="button" value="全选半选" onclick='alertNode($("#tree").tree("getChecked",["indeterminate","checked"]))' />
		<input type="button" value="未选中" onclick='alertNode($("#tree").tree("getChecked","unchecked"))' />
		<ul id="tree">

		</ul>

		<script type="text/javascript">
			function alertNode(nodes) {
				var texts = new Array();
				$(nodes).each(function(i, node) {
					texts[i] = node["text"];
				});
				alert(texts.join(","));
			}
			$("#tree").tree({
				checkbox: true, //复选框
				collapseAll: true,
				//cascadeCheck: false, //级联选中：false
				//onlyLeafCheck: true, //只是叶子节点有复选框
				url: "http://localhost:8080/getTree",
				method: "get",
			})
		</script>
	</body>

</html>

实现拖拽修改树

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!--引入基本库-->
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.5.4/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/default/easyui.css" />
		<link rel="stylesheet" href="jquery-easyui-1.5.5.4/themes/icon.css" />
	</head>

	<body>
		<input type=