纯JS 动态加载无限级树形结构tree到Table自动合并单元格

有个奇葩?需求,要求把tree树形结构的数据显示到tabe上,因为级别不定包括上级的表格合并写起来还是有些难度的,所以给大家分享一下

先看一下成品

纯JS 动态加载无限级树形结构tree到Table自动合并单元格_第1张图片

以下是json格式,可根据具体情况修改

{
    "result":{
        "code":1,
        "data":{
            "list":[
                {
                    "test":"01",
                    "value":1,
                    "children":[
                        {
                            "test":"0101",
                            "value":11,
                            "children":[

                            ]
                        },
                        {
                            "test":"0102",
                            "value":12,
                            "children":[
                                {
                                    "test":"010201",
                                    "value":121,
                                    "children":[

                                    ]
                                },
                                {
                                    "test":"010202",
                                    "value":122,
                                    "children":[

                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "test":"02",
                    "value":2,
                    "children":[

                    ]
                },
                {
                    "test":"03",
                    "value":3,
                    "children":[
                        {
                            "test":"0301",
                            "value":31,
                            "children":[

                            ]
                        },
                        {
                            "test":"0302",
                            "value":32,
                            "children":[
                                {
                                    "test":"030201",
                                    "value":321,
                                    "children":[

                                    ]
                                },
                                {
                                    "test":"030202",
                                    "value":322,
                                    "children":[

                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "test":"04",
                    "value":4,
                    "children":[
                        {
                            "test":"0101",
                            "value":11,
                            "children":[

                            ]
                        }
                    ]
                },
                {
                    "test":"05",
                    "value":5,
                    "children":[
                        {
                            "test":"0501",
                            "value":51,
                            "children":[
                                {
                                    "test":"050101",
                                    "value":511,
                                    "children":[
                                        {
                                            "test":"05010101",
                                            "value":5111,
                                            "children":[
                                                {
                                                    "test":"0501010101",
                                                    "value":51111,
                                                    "children":[

                                                    ]
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    }
}

前台js递归节点动态生成html,代码如下




    
    
     
    


     
    

以上

你可能感兴趣的:(前端,html,javascript)