在web开发中有时会重复用到某些相同样式的表格,如果仅仅因为表格内容的不同而重复构建table表格就会非常的费时费力,我们可以使用template.js模板引擎来动态的生成表格。这个模板引擎要怎么使用呢?下面我举个简单的例子;
首先引入template.js
<script type=”text/javascript” src=”template.js”></script>
现在页面的任意位置插入类似如下代码:
<script id="deptPlanAdjust_template" type="text/html">
<table style="border:solid 1px black;border-collapse:collapse">
<tr style="height:30px">
<td style="border:solid 1px black">部门名称: </td>
<td colspan="2" style="border:solid 1px black">填写时间: 填写人: </td>
</tr>
<tr style="height:30px">
<th style='width:160px;border:solid 1px black'>指标名称</th>
<th style='width:160px;border:solid 1px black'>调整原因</th>
<th style='width:160px;border:solid 1px black'>调整结果</th>
</tr>
<$ for (var i = 0; i < data.length; i ++) { $>
<tr style="height:60px">
<td style="border:solid 1px black"><$= data[i].targetname $></td>
<td style="border:solid 1px black"><$=data[i].adjustreason $></td>
<td style="border:solid 1px black"><$=data[i].adjustresult $></td>
</tr>
<$ } $>
<%--{for el in data}--%>
<%--<tr>--%>
<%--<td >${el.targetname}</td>--%>
<%--<td>${el.adjustreason}</td>--%>
<%--<td>${el.adjustresult}</td>--%>
<%--</tr>--%>
<%--{/for}--%>
</table>
</script>
这个就是表格模板,里面的for循环是为了动态显示表格行数,在需要使用这个表格的地方写这样一段代码调用一下就可以了:
先写一个div来放置表格:
<div id="plan_deptPlanAdjust_viewtable"></div>
再进行调用:
function viewtabledata(data){
// console.info(data);
var html = template.render('deptPlanAdjust_template', data);
$("#plan_deptPlanAdjust_viewtable").append(html);
}
render函数需要的两个参数第一个是模板id,第二个是数据,数据格式要求为json。在页面任何需要相同样式表格的地方只需要传入模板id和要显示的数据就可以了,这样是不是方便很多了?