很多时候,我们会把一棵树存放到数据库中,当前台需要展示一个树形列表时,将这棵树读取出来并显示,这个过程是怎么实现的呢?
这篇文章是以构造一棵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": "总公司" } ]
在页面上如下显示:
大致就是这样实现的,如果觉得小编写的不明白可以加Q探讨或在下边回复
时间: 2024-10-28 14:37:32