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>

 

 

效果圖