• 数据库中树形列表(以easyui的tree为例)


    构造一棵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": "总公司"  
        }  
    ]  

    在页面上如下显示:

  • 相关阅读:
    演示Eclipse插件实现代码提示和补全
    重拾《 两周自制脚本语言 》- Eclipse插件实现语法高亮
    Kindle Windows版本 中文字体修改工具
    MD5加密算法原理及实现
    Spring boot 发送邮件示例
    ubuntu下svn的命令使用
    数据库的分区、分表、分库、分片的简介
    Vue 入门之目录结构介绍
    MQTT简单介绍与实现
    SVN使用规范
  • 原文地址:https://www.cnblogs.com/Levi1995/p/6196301.html
Copyright © 2020-2023  润新知