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();