使用easyui动态生成数的过程

最新推荐文章于 2022-04-12 11:07:25 发布

retaww

最新推荐文章于 2022-04-12 11:07:25 发布

阅读量148

点赞数

分类专栏： java 数据结构文章标签： java 数据结构 easyui 树结构

本文链接：https://blog.csdn.net/weixin_43942512/article/details/104170910

版权

java 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

数据结构

2 篇文章 0 订阅

订阅专栏

easyui

2 篇文章 0 订阅

订阅专栏

在一些项目中，尤其是后台管理的页面，常常遇到需要用树结构来清晰的表示数据结构的问题，最近在敲项目时了解了使用easyui来生成动态的树，十分简单。

easyui框架中已经对树结构进行了定义，你只要按照它的结构定义这么一个类，定义一些必须的属性即可，就可以直接生成相应的树结构。
在框架中定义的树的结点属性有

id：节点ID,可以作为参数来异步向页面地址获取子节点数据
text：节点文本
state：节点状态。取值为open(缺省默认值)或close。当设置为close时,会自动异步获取子节点的数据
checked：指明节点是否被选中。
attributes：自定义属性
children：以数组的形式包含子节点

用eclipse创建一个web项目，我用的是springmvc框架，别的应该也可以，配置一些基本的配置信息后，咱们写一个TreeNode的类
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;
	}
}

控制层的代码：

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("学生");
		
		TreeNode treeNode2 = new TreeNode();
		treeNode2.setId(2);
		treeNode2.setText("小学");
		treeNode2.setChildren(null);
		
		TreeNode treeNode3 = new TreeNode();
		treeNode3.setId(3);
		treeNode3.setText("初中");
		
		TreeNode treeNode4 = new TreeNode();
		treeNode4.setId(4);
		treeNode4.setText("高中");
		treeNode4.setChildren(null);
		
		
		TreeNode treeNode5 = new TreeNode();
		treeNode5.setId(5);
		treeNode5.setText("初一");
		treeNode5.setChildren(null);
		TreeNode treeNode6 = new TreeNode();
		treeNode6.setId(6);
		treeNode6.setText("初二");
		treeNode6.setChildren(null);
		TreeNode treeNode7 = new TreeNode();
		treeNode7.setId(7);
		treeNode7.setText("初三");
		treeNode7.setChildren(null);
		
		//学生的子节点
		List<TreeNode> list1 = new ArrayList<TreeNode>();
		list1.add(treeNode2);
		list1.add(treeNode3);
		list1.add(treeNode4);
		treeNode1.setChildren(list1);
		
		//初中的子节点
		List<TreeNode> list2 = new ArrayList<TreeNode>();
		list2.add(treeNode5);
		list2.add(treeNode6);
		list2.add(treeNode7);
		treeNode3.setChildren(list2);
		
		//返回最后的整个结构
		List<TreeNode> tree = new ArrayList<TreeNode>();
		tree.add(treeNode1);
		
		return tree;
	}
}

前端代码：

<%@ 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>

目录结构：
在这里插入图片描述
除了框架必要的包，还引入了两个json的包，主要是将后台传来的数据以json格式返回到前台

用jackson也可以。

最后的效果如图：
在这里插入图片描述

retaww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用easyui动态生成数的过程

在一些项目中，尤其是后台管理的页面，常常遇到需要用树结构来清晰的表示数据结构的问题，最近在敲项目时了解了使用easyui来生成动态的树，十分简单。easyui框架中已经对树结构进行了定义，你只要按照它的结构定义这么一个类，就可以直接生成相应的树结构。在框架中定义的树的结点属性有id：节点ID,可以作为参数来异步向页面地址获取子节点数据text：节点文本state：节点状态。取值为ope...
复制链接

扫一扫