artTemplate渲染类树形数据结构

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        </style>
    </head>
    <body>
    <table border="1px solid #ccc" style="border-collapse:collapse;" id="table">
        <tr>
            <th>索引</th>
            <th>姓名</th>
            <th>证件类型</th>
            <th>证件号</th>
            <th>手机号</th>
            <th>出生日期</th>
        </tr>
        <tbody id="content">

        </tbody>
        <tbody id="content1">

        </tbody>
    </table>

    <div id="info"  style="border: 1px solid #ccc; text-align: center; display: none;">
        <p>编号：<span id="id"></span></p>
        <p>姓名：<span id="name"></span></p>
        <p>证件类型：<span id="iden"></span></p>
        <p>证件号：1111</p>
        <p>手机号：<span id="phone"></span></p>
        <p>出生日期：<span id="add"></span></p>
        <p>所在地：北京</p>
        <p> <span>取消</span> <span id="btn">确定</span></p>
    </div>

    </body>
    <script type="text/html" id="test">
        {{if flag}}
            {{each orderArray as value}}
        <tr>
            <td>{{value.id}}</td>
            <td>{{value.name}}</td>
            {{each value.identity as v}}
            {{each v.id_type as vi}}
            <td>{{vi.name}}</td>
            {{/each}}
            <td>{{v.id}}</td>
            {{/each}}
            <td>{{value.phone}}</td>
            <td>{{value.date_of_birth}}</td>
        </tr>
         {{/each}}
        {{/if}}
</script>
    <script type="text/html" id="test1">
        {{if flag}}
            {{each allList as value}}
        <tr>
            <td>{{value.id}}</td>
            <td>{{value.name}}</td>
            {{each value.identity as v}}
            {{each v.id_type as vi}}
            <td>{{vi.name}}</td>
            {{/each}}
            <td>{{v.id}}</td>
            {{/each}}
            <td>{{value.phone}}</td>
            <td>{{value.date_of_birth}}</td>
        </tr>
         {{/each}}
        {{/if}}
</script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./template.js"></script>
    <script>
        var data;
        function getTestData() {
            data = {
                "flag": true,
                "allList": [{
                    "id": "1",
                    "name": "张三1111111111111", //用户名
                    "identity": [ //证件类型
                        {
                            "id_type": [{
                                "id": 1,
                                "name": "身份证"
                            }],
                            "id": "110105199408286510"
                        }
                    ],
                    "phone": "15210329866", //手机号
                    "date_of_birth": "19940828", //出声日期
                    "address": "北京", //地址                    
                }],
                "orderArray": [{
                    "id": "1",
                    "name": "张三", //用户名
                    "identity": [ //证件类型
                        {
                            "id_type": [{
                                "id": 1,
                                "name": "身份证"
                            }],
                            "id": "110105199408286510"
                        }
                    ],
                    "phone": "15210329866", //手机号
                    "date_of_birth": "19940828", //出声日期
                    "address": "北京", //地址
                }, {
                    "id": "2",
                    "name": "赵四",
                    "identity": [{
                        "id_type": [{
                            "id": 1,
                            "name": "身份证"
                        }],
                        "id": "110105199508286510"
                    }],
                    "phone": "15210329877",
                    "date_of_birth": "19950828",
                    "address": "北京",
                }, {
                    "id": "3",
                    "name": "王五",
                    "identity": [{
                        "id_type": [{
                            "id": 2,
                            "name": "护照"
                        }],
                        "id": "G49331247"
                    }],
                    "phone": "15210329877",
                    "date_of_birth": "20010124",
                    "address": "上海",
                }]
            };
//             var orderArray = data.orderArray
// console.log(data.orderArray)
            $('#content').html(template('test', data))
            $('#content1').html(template('test1', data))

        }

        function clicked(id){
            var o, i;
            o = document.getElementById(id).rows;//表格所有行
            for(i = 0; i < o.length; i++){
                o[i].ondblclick = function(){ //设置事件
                    var id,oo,op,oq,or;
                    id = this.cells[0];
                    oo = this.cells[1];
                    op = this.cells[2];
                    oq = this.cells[4];
                    or = this.cells[5];
//                  alert(oo)
                    document.getElementById('id').innerHTML=id.innerHTML;
                    document.getElementById('name').innerHTML=oo.innerHTML;
                    document.getElementById('iden').innerHTML=op.innerHTML;
                    document.getElementById('phone').innerHTML=oq.innerHTML;
                    document.getElementById('add').innerHTML=or.innerHTML;
                    document.getElementById('info').style.display='block';
                    document.getElementById('btn').onclick=function () {
                        document.getElementById('info').style.display='none';
                    }
                }
            }
        }
        getTestData();
        clicked('table')
    </script>

</html>
原文地址：https://www.cnblogs.com/myprogramer/p/11641654.html