欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-07-04 18:49:50
...

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="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",
				//拖拽属性与方法
				dnd: true,
				onDrop: function(target, source, point) {
					alert(source.text);
					alert($(this).tree("getNode", target).text);
					editNode(source.text, source.id, $(this).tree(
						"getNode", target).id);
				}
			})

			function editNode(text, id, parentId) {
				$.ajax({
					url: "/edit_tree.json",
					method: "post",
					data: {
						id: id,
						text: text,
						parentId: parentId
					},
					success: function(data) {
						if(data.status == "true") {
							$("#tree").tree("reload");
						}
					}
				});
				alert("ok: " + text);
				alert("ok: " + id);
				alert("ok: " + parentId);
			}
		</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",
				//拖拽属性与方法
				dnd: true,
				onDrop: function(target, source, point) {
					alert(source.text);
					alert($(this).tree("getNode", target).text);
					editNode(source.text, source.id, $(this).tree(
						"getNode", target).id);
				},
				//此方法添加了【】在文本中
				formatter: function(node) {
					return "[" + node.text + "]";
				},
//				loadFilter: function(data) {
//					for(var i = 0; i < data.length; i++)
//						if(data[i].text == "Item2") {
//							data[i].iconCls = "icon-add";
//						}
//					return data;
//				},
				onClick: function(node) {
					$(this).tree("beginEdit", node.target);
				},
				onAfterEdit: function(node) {
					editNode(node.text, node.id, node.parentId);
				}
			})

			function editNode(text, id, parentId) {
				$.ajax({
					url: "http://localhost:8080/edit_tree.json",
					method: "post",
					data: {
						id: id,
						text: text,
						parentId: parentId
					},
					success: function(data) {
						if(data.status == "true") {
							$("#tree").tree("reload");
						}
					}
				});
				alert("ok: " + text);
				alert("ok: " + id);
				alert("ok: " + parentId);
			}
		</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>

		<div id="mm" class="easyui-menu" style="width: 120px;">
			<div onclick="appendNode()" data-options="iconCls:'icon-add'">Append</div>
			<div onclick="insertNode()" data-options="iconCls:'icon-back'">Insert</div>
			<div onclick="removeNode()" data-options="iconCls:'icon-remove'">Remove</div>
		</div>

		<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",
				//拖拽属性与方法
				dnd: true,
				onDrop: function(target, source, point) {
					alert(source.text);
					alert($(this).tree("getNode", target).text);
					editNode(source.text, source.id, $(this).tree(
						"getNode", target).id);
				},
				//此方法添加了【】在文本中
				formatter: function(node) {
					return "[" + node.text + "]";
				},
				//				loadFilter: function(data) {
				//					for(var i = 0; i < data.length; i++)
				//						if(data[i].text == "Item2") {
				//							data[i].iconCls = "icon-add";
				//						}
				//					return data;
				//				},

				//实现可编辑树：onDblClick（双击），onClick（单击）
				onDblClick: function(node) {
					$(this).tree("beginEdit", node.target);
				},
				onAfterEdit: function(node) {
					editNode(node.text, node.id, node.parentId);
				},

				//实现树菜单
				onContextMenu: function(e, node) {
					e.preventDefault();
					$(this).tree("select", node.target);
					$("#mm").menu("show", {
						left: e.pageX,
						top: e.pageY
					});

				}
			})

			function editNode(text, id, parentId) {
				$.ajax({
					url: "http://localhost:8080/edit_tree.json",
					method: "post",
					data: {
						id: id,
						text: text,
						parentId: parentId
					},
					success: function(data) {
						if(data.status == "true") {
							$("#tree").tree("reload");
						}
					}
				});
				alert("ok: " + text);
				alert("ok: " + id);
				alert("ok: " + parentId);
			}

			//菜单三法：appendNode
			var id = 0;
			function appendNode() {
				var selected = $("#tree").tree("getSelected");
				var node = {
					parent: selected.target,
					data: [{
						id: id, //++id
						text: '',
						parentId: $('#tree').tree("getNode", selected.target).id
					}]
				}
				$("#tree").tree("append", node);
				node = $("#tree").tree("find", id);
				$("#tree").tree("beginEdit", node.target);
				alter("789");
			}
			
			//菜单三法：insertNode
			function insertNode() {
				var selected = $("#tree").tree("getSelected");
				var node = {
					id: id,
					text: '',
					parentId: $('#tree').tree("getNode", selected.target).parentId
				}
				$("#tree").tree("insert", {
					after: selected.target,
					data: node
				});
				node = $("#tree").tree("find", id);
				$("#tree").tree("beginEdit", node.target)

			}
			
			//菜单三法：removeNode
			function removeNode() {
				var selected = $("#tree").tree("getSelected");
				//$("#tree").tree("remove", selected.target);
				$.ajax({
					type:"post",
					url:"http://127.0.0.1:8080/delete_tree.json",
					data:{ids:selected.id},
					cashe:false,
					success:function(data){
						if(data.status == "true"){
							$("#tree").tree("reload");
						}
					}
				});
			}
		</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"))' />
		<input type="button" value="删除" onclick="deleteNode()" />
		<ul id="tree">

		</ul>

		<div id="mm" class="easyui-menu" style="width: 120px;">
			<div onclick="appendNode()" data-options="iconCls:'icon-add'">Append</div>
			<div onclick="insertNode()" data-options="iconCls:'icon-back'">Insert</div>
			<div onclick="removeNode()" data-options="iconCls:'icon-remove'">Remove</div>
		</div>

		<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",
				//拖拽属性与方法
				dnd: true,
				onDrop: function(target, source, point) {
					alert(source.text);
					alert($(this).tree("getNode", target).text);
					editNode(source.text, source.id, $(this).tree(
						"getNode", target).id);
				},
				//此方法添加了【】在文本中
				formatter: function(node) {
					return "[" + node.text + "]";
				},
				//				loadFilter: function(data) {
				//					for(var i = 0; i < data.length; i++)
				//						if(data[i].text == "Item2") {
				//							data[i].iconCls = "icon-add";
				//						}
				//					return data;
				//				},

				//实现可编辑树：onDblClick（双击），onClick（单击）
				onDblClick: function(node) {
					$(this).tree("beginEdit", node.target);
				},
				onAfterEdit: function(node) {
					editNode(node.text, node.id, node.parentId);
				},

				//实现树菜单
				onContextMenu: function(e, node) {
					e.preventDefault();
					$(this).tree("select", node.target);
					$("#mm").menu("show", {
						left: e.pageX,
						top: e.pageY
					});

				}
			})

			function editNode(text, id, parentId) {
				$.ajax({
					url: "http://localhost:8080/edit_tree.json",
					method: "post",
					data: {
						id: id,
						text: text,
						parentId: parentId
					},
					success: function(data) {
						if(data.status == "true") {
							$("#tree").tree("reload");
						}
					}
				});
				alert("ok: " + text);
				alert("ok: " + id);
				alert("ok: " + parentId);
			}

			//菜单三法：appendNode
			var id = 0;

			function appendNode() {
				var selected = $("#tree").tree("getSelected");
				var node = {
					parent: selected.target,
					data: [{
						id: id, //++id
						text: '',
						parentId: $('#tree').tree("getNode", selected.target).id
					}]
				}
				$("#tree").tree("append", node);
				node = $("#tree").tree("find", id);
				$("#tree").tree("beginEdit", node.target);
				alter("789");
			}

			//菜单三法：insertNode
			function insertNode() {
				var selected = $("#tree").tree("getSelected");
				var node = {
					id: id,
					text: '',
					parentId: $('#tree').tree("getNode", selected.target).parentId
				}
				$("#tree").tree("insert", {
					after: selected.target,
					data: node
				});
				node = $("#tree").tree("find", id);
				$("#tree").tree("beginEdit", node.target)

			}

			//菜单三法：removeNode
			function removeNode() {
				var selected = $("#tree").tree("getSelected");
				//$("#tree").tree("remove", selected.target);
				$.ajax({
					type: "post",
					url: "http://127.0.0.1:8080/delete_tree.json",
					data: {
						ids: selected.id
					},
					cashe: false,
					success: function(data) {
						if(data.status == "true") {
							$("#tree").tree("reload");
						}
					}
				});
			}

			//多选删除
			function deleteNode() {
				var nodes = $("#tree").tree("getChecked");
				var ids = new Array();
				$(nodes).each(function(i, node) {
					ids[i] = node["id"];
				});
				$.ajax({
					type: "post",
					url: "http://127.0.0.1:8080/delete_tree.json",
					data: {
						ids: ids.join(",")
					},
					cashe: false,
					success: function(data) {
						if(data.status == "true") {
							$("#tree").tree("reload");
						}
					}
				});
			}
		</script>
	</body>

</html>

 

上一篇： # opengl学习之路（1）

下一篇： 第十二章编程作业

推荐阅读