TreeTable樹形資料清單

    做項目的過程中遇到TreeTable,感覺很焦急，于是我就去github上面找，發現很糟糕。上面需要寫的代碼太過于多，本人手比較懶，是以幾番查找。找到了一個比較實用的TreeTable的js

    檔案中的default和vsStyle是兩種不同的風格

頁面引用就是jquery.treeTable.js就可以了，那麼怎麼實作樹形清單呢？當然資料就需要是json格式

var request = JSON.stringify(paramsModel);  
		request = escape(encodeURIComponent(request));
		var url=baseUrl+"rest/xx/"+request+"/"+key+".json";	
		console.log(url);
		$.ajax({
            type: "get",
            url: url, //Servlet請求位址
            dataType: 'json',
            cache: false,
  			async: false,
            success: function (data) {
            	//eval将字元串轉成對象數組  
            	data=eval(data);
            	var showContent = ""; //添加内容變量
            	if(data!=null){
            		var con = data.rows;//擷取json中的list清單
                    console.log(con);
                    if(con.length>0){
    	                for (var i = 0; i < con.length; i++) {
    	                    var a = con[i];
    	                    if (a.fid == a.departId) { //判斷是否是一級節點
    	                        showContent += "";
    	                        
    	                    } else {
    	                        showContent += "";
    	                        
    	                    }
    	                }
                    }
            	}
                $("#treeTable").append(showContent);
                //以下為初始化表格樣式
                var option = {
                    theme: 'vsStyle',
                    expandLevel: 2,
                };
                $('#treeTable').treeTable(option);
                console.info("内容已經加載并初始化");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
                console.log("資料請求異常 請檢視控制台錯誤 或者檢查url配置");
            }
        });
           

其中裡面的theme就是不同風格對應的檔案夾

那麼背景的資料就需要對應成json格式

這裡推薦一個處理遞歸數組的Java檔案

public class ProjectConstructeTreeList {
    private List<BimProjectConstruction> resultNodes = new ArrayList<BimProjectConstruction>();//樹形結構排序之後list内容
    private List<BimProjectConstruction> nodes; //傳入list參數
    
    public ProjectConstructeTreeList(List<BimProjectConstruction> nodes) {//通過構造函數初始化
        this.nodes = nodes;
    }

    /**
     * 建構樹形結構list
     * @return 傳回樹形結構List清單
     */
    public List<BimProjectConstruction> buildTree() {
        for (BimProjectConstruction node : nodes) {
            if (node.getFid().equals(node.getDepartId())) {//通過循環一級節點 就可以通過遞歸擷取二級以下節點
                resultNodes.add(node);//添加一級節點
                build(node);//遞歸擷取二級、三級、。。。節點
            }
        }
        return resultNodes;
    }
    /**
     * 遞歸循環子節點
     *
     * @param node 目前節點
     */
    private void build(BimProjectConstruction node) {
        List<BimProjectConstruction> children = getChildren(node);
        if (!children.isEmpty()) {//如果存在子節點
            for (BimProjectConstruction child : children) {//将子節點周遊加入傳回值中
                resultNodes.add(child);
                build(child);
            }
        }
    }
    /**
     * @param node
     * @return 傳回
     */
    private List<BimProjectConstruction> getChildren(BimProjectConstruction node) {
        List<BimProjectConstruction> children = new ArrayList<BimProjectConstruction>();
        for (BimProjectConstruction child : nodes) {
            if (node.getId().equals(child.getFid())) {//如果id等于父id
                children.add(child);//将該節點加入循環清單中
            }
        }
        return children;
    }

}
           

調用方式:

ProjectConstructeTreeList tree = new ProjectConstructeTreeList(ConstructionList);
List<BimProjectConstruction> listTree=tree.buildTree();