数据库中树形列表(以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": "总公司"  
    }  
]  

 

在页面上如下显示:

posted @ 2016-12-19 09:26  庚庚庚庚庚辰  阅读(2495)  评论(1编辑  收藏  举报