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

 

在页面上如下显示:

转载于:https://www.cnblogs.com/Levi1995/p/6196301.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
easyui是一个基于jQuery的UI框架,提供了丰富的界面组件和交互效果,方便开发人员快速构建Web页面。而treeeasyui的一个状组件,用于展示层级关系的数据。 在使用easyui tree进行java开发时,我们首先需要引入easyui的相关依赖包,并在页面引入相应的脚本和样式文件。然后,我们可以通过在页面定义一个div容器,将tree组件渲染在页面上。 在java后台代码,我们需要提供数据给tree组件进行展示。一般来说,我们可以通过数据库查询、接口调用等方式获取数据,并将数据转换为json格式。然后,将json数据返回给前端页面,供tree组件使用。 接下来,我们需要在前端页面初始化并配置tree组件。通过调用easyui提供的API,我们可以设置tree的数据源、展开图标、折叠图标、节点点击事件等。可以根据具体需求对tree进行自定义配置,以满足我们的业务需求。 在页面渲染完成后,easyui tree组件会自动将数据渲染为状结构,并提供相应的交互功能,比如展开收起节点、选节点等。我们可以通过对tree组件的事件进行监听,实现特定操作,比如点击节点后加载子节点、在节点上右键弹出菜单等。 总之,通过使用easyui tree组件,结合java后台开发,我们可以方便地实现树形结构的展示和交互操作,提升用户体验,简化开发流程。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值