The process of using easyui to dynamically generate numbers

In some projects, especially in the background management pages, we often encounter the problem that we need to use tree structure to express the data structure clearly. Recently, we learned how to use easyui to generate dynamic tree when knocking on the project, which is very simple.

The tree structure has been defined in easyui framework. As long as you define such a class according to its structure and define some necessary attributes, you can directly generate the corresponding tree structure.
The node attributes of the tree defined in the framework are

ID: the node ID, which can be used as a parameter to asynchronously obtain the sub node data from the page address
Text: node text
State: node state. The value is open (default) or close. When it is set to close, the data of child nodes will be acquired automatically and asynchronously
checked: indicates whether the node is selected.
attributes: Custom attributes
Children: include children as arrays

To create a web project with eclipse, I use the spring MVC framework, and I can configure some basic configuration information. Let's write a TreeNode class
TreeNode.java

package com.tree.pojo;

import java.util.List;

public class TreeNode {
	private int id;
	private String text;
	private List<TreeNode> children;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public List<TreeNode> getChildren() {
		return children;
	}
	public void setChildren(List<TreeNode> children) {
		this.children = children;
	}
}

Code of control layer:

package com.tree.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.tree.pojo.TreeNode;

@Controller
@RequestMapping("controller")
public class GetTree {

	@RequestMapping(value = "getTree")
	@ResponseBody
	public List<TreeNode> getTree() {
		System.out.println("fuck");
		TreeNode treeNode1 = new TreeNode();
		treeNode1.setId(1);
		treeNode1.setText("Student");
		
		TreeNode treeNode2 = new TreeNode();
		treeNode2.setId(2);
		treeNode2.setText("Primary school");
		treeNode2.setChildren(null);
		
		TreeNode treeNode3 = new TreeNode();
		treeNode3.setId(3);
		treeNode3.setText("Junior middle school");
		
		TreeNode treeNode4 = new TreeNode();
		treeNode4.setId(4);
		treeNode4.setText("high school");
		treeNode4.setChildren(null);
		
		
		TreeNode treeNode5 = new TreeNode();
		treeNode5.setId(5);
		treeNode5.setText("First day");
		treeNode5.setChildren(null);
		TreeNode treeNode6 = new TreeNode();
		treeNode6.setId(6);
		treeNode6.setText("Second day");
		treeNode6.setChildren(null);
		TreeNode treeNode7 = new TreeNode();
		treeNode7.setId(7);
		treeNode7.setText("Third grade");
		treeNode7.setChildren(null);
		
		//Child nodes of students
		List<TreeNode> list1 = new ArrayList<TreeNode>();
		list1.add(treeNode2);
		list1.add(treeNode3);
		list1.add(treeNode4);
		treeNode1.setChildren(list1);
		
		//Child nodes of junior high school
		List<TreeNode> list2 = new ArrayList<TreeNode>();
		list2.add(treeNode5);
		list2.add(treeNode6);
		list2.add(treeNode7);
		treeNode3.setChildren(list2);
		
		//Back to the last whole structure
		List<TreeNode> tree = new ArrayList<TreeNode>();
		tree.add(treeNode1);
		
		return tree;
	}
}

Front end code:

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link href="EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
<link href="EasyUI/themes/icon.css" rel="stylesheet" type="text/css"/>
<link href="EasyUI/demo.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="EasyUI/jquery.min.js"></script>
<script type="text/javascript" src="EasyUI/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
</head>
<body>
	<div style="width: 180px;height:300px">
		<ul id="tt" class="easyui-tree"></ul>
	</div>
	<script type="text/javascript">
		$('#tt').tree({
			//url : 'controller/getTree'
			url : 'controller/getTree'
		});
	</script>
</body>
</html>

Directory structure:

In addition to the necessary packages of the framework, two json packages are introduced, mainly to return the data from the background to the foreground in json format

You can use jackson, too.