树形结构横向的，类似脑图

树形结构.png

• 整体以原生js写成页面只有一个
  <div id="chart"></div>

• 如图形式的横向树形结构，

// 数据结构
var ScriptManageObj = [{
        id: 1,
        name: 'A1',
        list: [
            {
                id: 11,
                name: 'B1',
                list: [
                    {
                        id: 111,
                        name: 'C1',
                        list: [{
                            id: 111,
                            name: 'D3',
                            list: []
                        },{
                            id: 111,
                            name: 'D4',
                            list: []
                        }]
                    },
                ]
            },
            {
                id: 12,
                name: 'B2',
                list: [{
                    id: 121,
                    name: 'C2',
                    list: []
                }]
            },
        ]
    }];

• 整体样式如下

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            padding: 20px;
        }
        .table{
            /*overflow: hidden;*/
            white-space:nowrap;
        }
        .text-header{
            /*float: left;*/
            display: inline-block;
            white-space:nowrap;
            padding-bottom: 10px;
            padding-top: 10px;
            margin-left: 50px;
            margin-right:50px;
            position: relative;
        }
        .text-header>.after{
            content: '';
            height: 1px;
            width: 50px;
            background: red;
            position: absolute;
            left: 100%;
            top: 50%;
        }
        .text-header>.before{
            content: '';
            height: 1px;
            width: 50px;
            background: red;
            position: absolute;
            right: 100%;
            top: 50%;
        }
        .text-header>div{
            background-color: #000;
            color: #fff;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;

            /*margin-left: 20px;*/
            /*margin-bottom: 20px;*/
        }
        .content{
            /*float: left;*/
            display: inline-block;
            white-space:nowrap;

        }


        /*线条*/
        .line,.line-only{
            /*float: left;*/
            display: inline-block;
            white-space:nowrap;

        }
        .line>div,.line-only>div{
            height: 29px;
            width: 30px;
        }
        /* .table>.tr{
            border-left: 1px solid red;
        } */
        .tr>div{
            vertical-align: middle;
        }
        .tr{
            position: relative;
        }
        .tr>.tr_children{
            position: absolute;
            left: 0%;
            height: 100%;
            width: 1px;
            background: red;
            bottom: 0%;
            /* border-left: 1px solid red; */
        }
        .table>.tr:first-child>.tr_children{
            position: absolute;
            left: 0%;
            height: 50%;
            width: 1px;
            background: red;
            top: 50%;
        }
        .table>.tr:last-child>.tr_children{
            position: absolute;
            left: 0%;
            height: 50%;
            width: 1px;
            background: red;
            bottom: 50%;
        }
        .tr>.line>div:nth-of-type(1){
            display: inline-block;
            white-space:nowrap;

            border-left: 1px dashed red;
            border-bottom: 1px dashed red;
        }
        .tr>.line>div:nth-of-type(2){
            border-left: 1px dashed red;
        }
        .tr:nth-of-type(1)>.line>div:nth-of-type(1){
            border-left: none;
        }
        .tr:nth-last-child(1)>.line>div:nth-of-type(2){
            border-left: none;
        }
        .line-only>div:nth-of-type(1){
            border-bottom: 1px dashed red;
        }
    </style>

• 最后就是写的方法了啊

    var chart = document.getElementById('chart');
    var mode1 = function(rowSpanNumber, obj) {
        var table = '<div class="table">';
        obj.forEach(function(item) {
            table += '<div class="tr">';
            if(obj.length>1){
                table += '<div class="tr_children"></div>';
            }
            table += '<div class="text-header">';
            if(rowSpanNumber===1){// 判断前面的横线要不要
                table += '<div class="before"></div>';
            }
            table +=  '<div>'+item.name+'</div>';
            if(item.list && item.list.length != 0) {// 判断后面的横线要不要
                table += '<div class="after"></div>';
            }
            table += '</div>';
            if(item.list && item.list.length != 0) {
                table += '<div class="content">';
                table += mode1(1, item.list);// 回调
                table += '</div>'
            }
            table += '</div>'
        });
        table += '</div>';
        return table;
    };
    chart.innerHTML = mode1(0, ScriptManageObj);// 调用对应的方法写进去就好了哈哈

整体就这些了哈哈