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