构造一棵easyui前台框架的一个树形列表为例后台框架是spring MVC+JPA。
先看一下数据库是怎么建的,怎么存放的数据
下面是实体类
/**
* 部门类 用户所属部门(这里的部门是一个相对抽象的词)
* 使用前缀编码,每级增加三个数字,如:第一级 001,第二级001001,第三级001001001
* @author Administrator
*
*/
@Entity
public class Department { private String id; //部门id
private String pid; //父id
private String text; //部门名称
private List<Department> children; //用于存储子节点
@Id
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
} public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
@OneToMany
public List<Department> getChildren() {
return children;
}
public void setChildren(List<Department> children) {
this.children = children;
} }
由于使用的是easyui ,为了树可以正确显示,必须包含属性id和text。
下面是控制类,用于读取数据库中的数据,生成一个List,该list返回到前台时会转成json格式的数据,重点需要理解的就是getTree()和buildTree()这两个方法,通过递归生成这棵树,基本实现原理是遍历树的某一层,获取每个节点的子节点们(一个list),然后将它作为父节点的一个属性set进去
@Controller
@RequestMapping("/department")
public class DepartmentController { private static final String DEPARTEMNTMANAGE = "module/jsp/system/departmentManage.jsp"; @Resource(name="departmentServiceImpl")
private DepartmentService departmentService;
/**
* 获取部门管理页面.
* @return
*/
@RequestMapping("/getPage.do")
public String getUserManagePage(){
return DEPARTEMNTMANAGE;
} /**
* 获取部门树形列表
*/
@RequestMapping(value = "/getTree.do", method = RequestMethod.POST)
@ResponseBody //此注解表明返回值跳过视图处理部分,直接写入 http response body中
public List<Department> getTree(){
List<Department> root = departmentService.findById("0"); //获取根节点(获取的值存到list中)
net.sf.json.JSONArray jsonArray = net.sf.json.JSONArray.fromObject(buildTree(root));
System.out.println(jsonArray.toString()); return buildTree(root);
}
public List<Department> buildTree(List<Department> root){
for(int i=0;i<root.size();i++){
List<Department> children = departmentService.findByPid(root.get(i).getId()); //查询某节点的子节点(获取的是list)
buildTree(children);
root.get(i).setChildren(children);
}
return root;
} }
这里用查询的方法findById和findByPid是基于spring data JPA的方法,下面是相关类:
public interface DepartmentDao extends Repository<Department, Integer>{
public List<Department> findByPid(String pid);
public List<Department> findById(String id);
}
public interface DepartmentService {
public List<Department> findByPid(String pid);
public List<Department> findById(String id);
}
@Service("departmentServiceImpl")
public class DepartmentServiceImpl implements DepartmentService{ @Autowired
private DepartmentDao departmentDao; @Override
public List<Department> findByPid(String pid) {
return departmentDao.findByPid(pid);
} @Override
public List<Department> findById(String id) {
return departmentDao.findById(id);
} }
前台调用如下
$(function(){
$('#tt').tree({
url: 'department/getTree.do',
loadFilter: function(data){
if (data.d){
return data.d;
} else {
return data;
}
}
});
});
这是后台返回给前台一个如下的json格式的数据:
[
{
"children": [
{
"children": [
{
"children": [],
"id": "001001",
"pid": "001",
"text": "部门一"
},
{
"children": [],
"id": "001002",
"pid": "001",
"text": "部门二"
}
],
"id": "001",
"pid": "0",
"text": "一分公司"
},
{
"children": [
{
"children": [],
"id": "002001",
"pid": "002",
"text": "部门一"
},
{
"children": [],
"id": "002002",
"pid": "002",
"text": "部门二"
}
],
"id": "002",
"pid": "0",
"text": "二分公司"
},
{
"children": [],
"id": "003",
"pid": "0",
"text": "三分公司"
}
],
"id": "0",
"pid": "-1",
"text": "总公司"
}
]
在页面上如下显示:
数据库中树形列表(以easyui的tree为例)的更多相关文章
-
如何将数据库中存的树转化为树形列表(以easyui的tree为例)
很多时候,我们会把一棵树存放到数据库中,当前台需要展示一个树形列表时,将这棵树读取出来并显示,这个过程是怎么实现的呢? 这篇文章是以构造一棵easyui前台框架的一个树形列表为例,后台框架是sprin ...
-
EasyUI动态显示后台数据库中的数据
最近在完成一个项目,采用SSM框架搭建完成,前端使用EasyUI搭建页面: 其中涉及到一个查询显示功能:查询数据库中的数据,动态显示在页面之中,刚开始这部分十分有疑问,所以虚心向同学学习,现总结至博客 ...
-
JSP列表形式显示数据库中的数据 OracleCachedRowSet 实例
现在数据库中有一张用户表,希望用户在jsp页面中输入用户名和密码以及 用户类型,在servlet中插入数据库后,在另一个jsp页面中把数据库中所有的用户名和类型都以列表的形式列出来 可以用Ora ...
-
【MySQL疑难杂症】如何将树形结构存储在数据库中(方案一、Adjacency List)
今天来看看一个比较头疼的问题,如何在数据库中存储树形结构呢? 像mysql这样的关系型数据库,比较适合存储一些类似表格的扁平化数据,但是遇到像树形结构这样有深度的人,就很难驾驭了. 举个栗子:现在有一 ...
-
在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理
在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...
-
Excel-返回列表或数据库中的分类汇总(汇总可以实现要还是不要统计隐藏行功能) subtotal()
SUBTOTAL函数 函数名称:SUBTOTAL 主要功能:返回列表或数据库中的分类汇总. 使用格式:SUBTOTAL(function_num, ref1, ref2, ...) 参数说明:Func ...
-
C# Winform中的ComboBox控件绑定数据库项目作为列表内容
//初始化院区下拉列表,使用了Oracle数据库中的表项目 try { //string connString = "User=system;Password=manager;Data So ...
-
Ajax-ajax实例3-动态树形列表
项目结构: 项目演示: 技术要点: 1.3.2 技术要点在基本原理的介绍中,了解到通过在父节点内动态创建子节点,并利用样式表缩进完成树形列表的基本框架.除了这一点外,还有下面一些问题需要考虑.1 .将 ...
-
Web中树形数据(层级关系数据)的实现—以行政区树为例
在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 ...
随机推荐
-
《Javascript高级程序设计》读书笔记(1-3章)
第一章 JavaScript简介 1.1 JavaScript简史 略 1.2 JavaScript实现 虽然 JavaScript 和 ECMAScript 通常都被人们用来表达相同的含义,但 Ja ...
-
(最小路径覆盖) News 消息传递 (hust OJ 2604)
http://begin.lydsy.com/JudgeOnline/problem.php?id=2604 Description 总部最近打算向下面的N个工作人员发出了一条秘密消息.因为它是机 ...
-
使用DOS比较两个txt文件的差异
将两个文件放入到同一个文件夹下 DOS下提供了FC命令 点击开始->运行->输入cmd,进入DOS下,进入指定目录,输入FC a.txt b.txt进行比较,下面会显示出之间的差异
-
echarts标准饼图(一)——基本配置demo
echarts标准饼图解读共分为四部分, 一.基本配置demo 二.标题(title)配置 三.提示框(tooltip)配置 四.图例(legend)配置 五.系列列表(series )配置 下面是一 ...
-
模板引擎 Velocity
模板引擎 Velocity 一.Velocity简介: Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template langu ...
-
【译】使用requestIdleCallback
原文地址:http://galen-yip.com/2015/10/07/%E3%80%90%E8%AF%91%E3%80%91%E4%BD%BF%E7%94%A8requestIdleCallbac ...
-
少侠学代码系列(二)->;JS实现
少侠:小子,休息好了没,赶紧的 帅气的我:好了好了,嚷什么 少侠:(拔刀)嗯? 帅气的我:少侠,淡定淡定,我们来看秘籍吧,刚刚我们说了JS实现是由三个部分组成的 核心(ECMAScript),文档对象 ...
-
Mysql数据存在更新,不存在则插入的实现
有些情况下,我们需要对数据库进行插入或更新操作的时候需要先根据特定的字段去判断是否已存在,然后做出不同的插入或者跟新操作. replace函数: 我们要在需要判断的字段上建立一个唯一索引,且这个字段不 ...
-
Ne10编译安装
介绍 NEON,即"ARM Advanced SIMD",是ARM从ARMv7开始提供的高级单指令多数据(SIMD)扩展.它是一种64/128位混合SIMD体系结构.NEON在网上 ...
-
Matlab 如何输入矩阵
A=[1 2 3;4 5 6;7 8 9],每行之间用分号隔开 也可以用循环控制输入 n=input('请输入矩阵阶数:') for i=1:n for j=1:n a(i,j ...