HTML编程-模板生成含有纵向跨行或横向跨列的表格。

原创

MiaoGIS

修改于 2021-11-16 15:06:40

2.5K0

修改于 2021-11-16 15:06:40

文章被收录于专栏：Python in AI-IOTPython in AI-IOT

平时我们在开发web网页时，经常遇到把数据呈现为表格报告的情况，有时需要跨列合并或跨行合并单元格来让数据更加直观突出更加条理分明。

比起其他方法，使用模板根据数据生成这样的表格的html代码尤其既高效又简洁。下面介绍一下思路：

我们将模板文本包含在<script>......</script>之间。使用时 $('#cityForecastAQITableTemplate').html()取得模板文本，使用underscore模板函数template = _.template(...模板代码..)转换为模板函数。然后传入上下文数据作为参数调用模板函数，便生成了我们需要的html片段。

模板代码如下:

<script type="text/template" id="cityForecastAQITableTemplate">
    
    <table class="table table-bordered border-secondary">

                    <thead>
                        <tr>
                            <th class="region" rowspan="2">
                                <b>区域</b></th>
                            <th class="city" rowspan="2">
                                <b>城市</b></th>
                               <% _.each(dates,function(date){ %>
                                <% if(factor=='AQI') %>
                                 <th class="date" colspan="4">
                                <b><%=date%></b>
                                </th>
                                 <% ;%>
                                 <% if(factor!='AQI') %>
                                 <th class="date" colspan="3">
                                <b><%=date%></b>
                                </th>
                                 <% ;%>
                                <% }) %>
                           
                            

                        </tr>
                        <tr>
                        <% _.each(dates,function(date){ %>
                                
                                <th class="min">
                                <b>MIN</b></th>
                            <th class="max">
                                <b>MAX</b></th>
                            <th class="value">
                                <b><%=dictFactor[factor]%></b>
                            </th>
                                <% if(factor=='AQI') %>
                            <th class="primary">

                                <b>首污</b>
                            </th>
                                
                                <% ;%>  
                           <% })%>    
                        </tr>
                    </thead>
                    <tbody>
                      <% _.each(regions,function(region,rIndex){ %>
                      <% var citys=region['citys'] %> 
                        <% _.each(citys,function(city,cIndex){ %>
                        <tr data-city="<%=city['code']%>">
                        
                           <% if(cIndex==0) %>
                            <td rowspan="<%=citys.length%>" data-region="<%=region['code']%>"><%=region['name']%></td>
                            <% ;%> 
                            <td data-city="<%=city['code']%>"><%=city['name']%></td>
                             <% _.each(dates,function(date,dIndex){ %>
                            <td data-col="min" data-date="<%=date%>">0</td>
                            <td data-col="max" data-date="<%=date%>">0</td>
                            <td data-col="value" data-date="<%=date%>">0</td>
                             <% if(factor=='AQI') %>
                            <td data-col="primary" data-date="2021-11-16">0</td>
                              <% ;%> 
                                <% }); %> 
                            
                        </tr>
                        <% }); %>
                        <% }); %>
                         

                    </tbody>
                </table>
    </script>

1.假设日期数据dates如下:

["2021-11-16","2021-11-17","2021-11-18","2021-11-19","2021-11-20","2021-11-21","2021-11-22"]

2.假设地区(包含城市)数据如下:

[{
    "code": "北部",
    "name": "北部",
    "citys": [{
        "name": "安阳",
        "code": "安阳"
    }, {
        "name": "鹤壁",
        "code": "鹤壁"
    }, {
        "name": "濮阳",
        "code": "濮阳"
    }, {
        "name": "新乡",
        "code": "新乡"
    }, {
        "name": "焦作",
        "code": "焦作"
    }]
}, {
    "code": "中部",
    "name": "中部",
    "citys": [{
        "name": "郑州",
        "code": "郑州"
    }, {
        "name": "开封",
        "code": "开封"
    }, {
        "name": "许昌",
        "code": "许昌"
    }, {
        "name": "漯河",
        "code": "漯河"
    }, {
        "name": "平顶山",
        "code": "平顶山"
    }]
}, {
    "code": "东部",
    "name": "东部",
    "citys": [{
        "name": "商丘",
        "code": "商丘"
    }, {
        "name": "周口",
        "code": "周口"
    }]
}, {
    "code": "南部",
    "name": "南部",
    "citys": [{
        "name": "驻马店",
        "code": "驻马店"
    }, {
        "name": "信阳",
        "code": "信阳"
    }]
}, {
    "code": "西部",
    "name": "西部",
    "citys": [{
        "name": "三门峡",
        "code": "三门峡"
    }, {
        "name": "洛阳",
        "code": "洛阳"
    }]
}, {
    "code": "西南部",
    "name": "西南部",
    "citys": [{
        "name": "南阳",
        "code": "南阳"
    }]
}, {
    "code": "西北部",
    "name": "西北部",
    "citys": [{
        "name": "济源",
        "code": "济源"
    }]
}]

3.选择的因子为AQI

4.调用模板函数生成html片段并渲染到页面上。

var cityForecastAQITableTemplate = _.template($('#cityForecastAQITableTemplate').html());

        var html = cityForecastAQITableTemplate({
            'dates': dates7,
            'factor': factor,
            'regions': regions
        });
        $('#tableCityForecastAQI').html(html);

5.效果如下: