json转换成table？

有没有什么好的方法把json渲染成有合并的表格？
2、json

var data = [
        {
            201601: [
                {
                    205: [
                        {
                            jzlb: 1,
                            jzrc: 2
                        },
                        {
                            jzlb: 2,
                            jzrc: 3
                        }
                    ]
                },
                {
                    206: [
                        {
                            jzlb: 1,
                            jzrc: 2
                        },
                        {
                            jzlb: 2,
                            jzrc: 3
                        }
                    ]
                }
            ]
        }
    ];

我是怎么干的

<template id="template">
    <tr><td></td><td></td><td></td></tr>
</template>
<script>
    var json = [{id:1,name:'aa',key:233},.....]
    var temp = $($('#template').html());
    $(json).each(function(){
        temp.find('td').eq(0).text(this.id);
        temp.find('td').eq(1).text(this.name);
        temp.find('td').eq(2).text(this.key);
    });
</script>

你把表格拼成字符串，然后遍历你的json，对应的数据填写到对应的表格里

研究了一下午，贴出自己的代码把，有的地方是土办法就是了，而且改了结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <style>
        th, td {
            vertical-align: middle !important;
            text-align: center;
        }

        h1 {
            text-align: center;
        }
    </style>

    <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<h1>示例</h1>
<table class="table table-bordered">
    <thead>
    <tr>
        <th>救助月份</th>
        <th>救助单位</th>
        <th>救助类别</th>
        <th>救助人次</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="4">201601</td>
        <td rowspan="2">205</td>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td rowspan="2">206</td>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>
    </tbody>
</table>
<h1>效果</h1>
<table class="table table-bordered" id="demo">
    <thead>
    <tr>
        <th>救助月份</th>
        <th>救助单位</th>
        <th>救助类别</th>
        <th>救助人次</th>
        <th>救助金额</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<script type="text/javascript">
    var data = [
        {
            label: "2016年01月",
            children: [
                {
                    label: "单位1",
                    children: [
                        {
                            label: "救助类别1",
                            jzrc: "23",
                            jzje: "24"
                        }
                    ]
                },
                {
                    label: "单位2",
                    children: [
                        {
                            label: "救助类别3",
                            jzrc: "25",
                            jzje: "26"
                        },
                        {
                            label: "救助类别4",
                            jzrc: "27",
                            jzje: "28"
                        }
                    ]
                },
                {
                    label: "单位3",
                    children: [
                        {
                            label: "救助类别5",
                            jzrc: "25",
                            jzje: "28"
                        },
                        {
                            label: "救助类别6",
                            jzrc: "22",
                            jzje: "21"
                        },
                        {
                            label: "救助类别7",
                            jzrc: "11",
                            jzje: "111"
                        }
                    ]
                }
            ]
        },
        {
            label: "2016年02月",
            children: [
                {
                    label: "单位4",
                    children: [
                        {
                            label: "救助类别8",
                            jzrc: "11",
                            jzje: "22"
                        }
                    ]
                }
            ]
        }
    ];
    var $tBody = $("#demo tbody");

    /**
     * 查找字符串出现次数
     * @param str
     * @param substr
     * @returns {*}
     */
    function countSubstr(str, substr) {
        var count;
        var reg = "/" + substr + "/gi";    //查找时忽略大小写
        reg = eval(reg);
        if (str.match(reg) == null) {
            count = 0;
        } else {
            count = str.match(reg).length;
        }
        return count;

        //返回找到的次数
    }

    /**
     * 根据数据判断子级是不是都已经渲染完成
     * @param data
     */
    function isChildrenRendered(data) {
        var isRendered = true;
        if (typeof data == 'undefined') console.info(data);
        for (var i = 0; i < data.length; i++) {
            if (!data[i].rendered) {
                isRendered = false;
                break;
            } else {
                if (data[i].children) {
                    for (var j = 0; j < data[i].children.length; j++) {
                        if (!data[i].children[j].rendered) {
                            if (isRendered) {
                                isRendered = false;
                                break;
                            }
                        }
                    }
                }
            }
        }

        return isRendered;
    }

    function addOne(data) {
        //TODO 土办法：先将json转换成字符串，然后查找某个必有属性，从而得出需要几行
        var counts = countSubstr(JSON.stringify(data), 'jzje');

        for (var i = 0; i < counts; i++) {
            var $tr = $("<tr></tr>");

            //添加月份
            if (!data.rendered) {
                $tr.append("<td rowspan='" + (counts) + "'>" + data.label + "</td>");
                data.rendered = true;
            }
            for (var j = 0; j < data.children.length; j++) {
                //如果子级还没渲染完成
                if (!isChildrenRendered(data.children[j].children)) {
                    if (!data.children[j].rendered) {
                        data.children[j].rendered = true;
                        //添加救助单位
                        $tr.append("<td rowspan='" + (countSubstr(JSON.stringify(data.children[j].children), 'jzje')) + "'>" + data.children[j].label + "</td>");
                    }

                    for (var k = 0; k < data.children[j].children.length; k++) {
                        if (!data.children[j].children[k].rendered) {
                            data.children[j].children[k].rendered = true;
                            //添加救助类别、救助人次、救助金额
                            $tr.append("<td>" + data.children[j].children[k].label + "</td>");
                            $tr.append("<td>" + data.children[j].children[k].jzrc + "</td>");
                            $tr.append("<td>" + data.children[j].children[k].jzje + "</td>");
                            break;
                        }
                    }

                    break;
                }

            }

            $tBody.append($tr);
        }
    }

    for (var i = 0; i < data.length; i++) {
        addOne(data[i]);
    }
</script>
</body>
</html>

为何不贴出来你的json

【热门文章】