如何将数据库中存的树转化为树形列表(以easyui的tree为例)

来源:互联网 发布:黑米软件官网 编辑:程序博客网 时间:2024/06/03 18:36

很多时候,我们会把一棵树存放到数据库中,当前台需要展示一个树形列表时,将这棵树读取出来并显示,这个过程是怎么实现的呢?

这篇文章是以构造一棵easyui前台框架的一个树形列表为例,后台框架是spring MVC+JPA。

首先看一下数据库中这颗树是怎么存的:


树的结构一目了然,这是一棵表示部门的树。

下面是实体类:

/** * 部门类 用户所属部门(这里的部门是一个相对抽象的词) * 使用前缀编码,每级增加三个数字,如:第一级 001,第二级001001,第三级001001001 * @author Administrator * */@Entitypublic class Department {   private String id;          //部门id private String pid;         //父idprivate String text;        //部门名称private List<Department> children;   //用于存储子节点@Idpublic 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;}@OneToManypublic 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{@Autowiredprivate DepartmentDao departmentDao;@Overridepublic List<Department> findByPid(String pid) {return departmentDao.findByPid(pid);}@Overridepublic 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探讨或在下边回复


0 0