EasyUI---tree

EasyUI的tree在获取action返回的json字符串时最少具有三个属性id、text和children,这样在读取时才会在页面正常显示树形

 

这里比较重要的就是在数据库中对数据的存储吧，说白了还是表结构的设置

 

这里数据库设计跟省市区的下拉列表框实现级联设计理念是一样的，最少要三列（id，名称，父id）

 

之后在dao层写一个根据父id查寻得方法（这里是在之前项目写的，是Hibernate、Struts2及EasyUI的整合，并没有整合spring）

//    获取数据列表
    public List<Region> shouAll(String parentRegionID)
    {
        List<Region> list = new ArrayList<Region>() ;
        
        init() ;
        
        Query qu= se.createQuery("from Region where parentRegionID = ? ") ;
        
        qu.setString(0, parentRegionID) ;
        
        list = qu.list() ;
        
        destroy();
        
        return list ;
    }

这里我们查到数据了，但是怎么把数据转成我们需要的json格式呢，这里我们需要写一个封装类来将我们查到数据转换成json字符串的格式

package com.hanqi.json;

import java.util.List;

public class TreeNode {

    private String id ;//id
    private String text ;//对应tree的text属性
    private List<TreeNode> children ;//子节点集合
    
    public TreeNode() {
        super();
    }
    
    public TreeNode(String id, String text) {
        super();
        this.id = id;
        this.text = text;
    }
    
    public String getId() {
        return id;
    }
    
    public void setId(String id) {
        this.id = id;
    }
    
    public String getText() {
        return text;
    }
    
    public void setText(String text) {
        this.text = text;
    }
    
    public List<TreeNode> getChildren() {
        return children;
    }
    
    public void setChildren(List<TreeNode> children) {
        this.children = children;
    }
    
}

 

封装类写完了，数据也查到了，我们需要在service层处理数据，

这里我们采用了递归的方法，先按父节点为0的某一记录进行查询，直到没有子节点再重新查询另一条父节点，直到查完

package com.hanqi.service;

import java.util.ArrayList;
import java.util.List;

import com.han.entity.Region;
import com.hanqi.dao.RegionDAO;
import com.hanqi.json.TreeNode;

public class RegionService {

    public List<Region> shouAll(String parentRegionID)
    {
        return new RegionDAO().shouAll(parentRegionID) ;
    }
    
    
    //递归调用的方法
    //获取子节点集合
    public List<TreeNode> getTreeNode(String id)
    {
        List<TreeNode> list = null ;
        
        List<Region> lr = shouAll(id) ;
        
        if(lr != null && lr.size() > 0)//当没有查到数据时结束递归
        {
            list = new ArrayList<>() ;
            
            for(Region r : lr)
            {
                TreeNode tn = new TreeNode(r.getRegionID(), r.getRegionName()) ;
                
                /*
                 *        通过节点名的追踪，它的语句执行是从父节点0中的某一条记录开始一直到最后没有子节点了
                 *        再重新执行另一个父节点为0的记录
                 */
                System.out.println(" name = "+r.getRegionName());
                
                //得到节点的子节点
                //递归调用
                List<TreeNode> children = getTreeNode(r.getRegionID()) ;
                
                tn.setChildren(children);
                
                list.add(tn) ;
            }
        }
        
        return list; 
    }
    
}

 

接下来就是传到页面了，这里我们写一个action的类来将数据打包并发送到前台

package com.hanqi.action;

import java.io.IOException;
import java.util.List;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.alibaba.fastjson.JSONArray;
import com.hanqi.json.TreeNode;
import com.hanqi.service.RegionService;

public class TreeAction {

    
    //测试EasyUI  tree 
    public void showTree()
    {
            try {//捕获异常
            
                List<TreeNode> list = new RegionService().getTreeNode("0") ;//直接调用dao方法从父节点为零查
                
                String str = JSONArray.toJSONString(list) ; //定义字符串并将父节点为0查到的集合转给字符串并赋值
                
                HttpServletResponse response = ServletActionContext.getResponse();//获取内置对象response
                
                response.setCharacterEncoding("UTF-8");//转码
                
                System.out.println(str);
                
                response.getWriter().write(str);
            
            } catch (IOException e) {
                // TODO 自动生成的 catch 块
                e.printStackTrace();
            } 
    }
    
}

最后就是网页的请求及数据的显示了

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>树形</title>
<!-- 1    jQuery的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>

<!-- 2    css资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">

<!-- 3    图标资源 -->
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css"> 

<!-- 4    EasyUI的js包 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
 
<!-- 5    本地语言 -->
<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

</head>
<body>
<script type="text/javascript">
    $(function(){
        
        $("#tt").tree({
            url:"treeaction.action",
            loadFilter:function(data){
                if(data.text){
                    return data.text ;
                }else{
                    return data ;
                }
            }
        });
        
    })
</script>
<ul id="tt"></ul> 
</body>
</html>

 

 

效果图