在javascriptl中使用表格模板引擎template.js简化开发

最新推荐文章于 2023-03-30 17:03:35 发布

GavinWGQ

最新推荐文章于 2023-03-30 17:03:35 发布

阅读量3.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web开发文章标签：模板引擎 template.js

本文链接：https://blog.youkuaiyun.com/henuboy/article/details/17302847

web开发专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用template.js模板引擎动态生成表格，通过一个具体示例展示了如何在网页中引入该模板引擎，并创建一个可复用的表格模板，进而通过传递JSON数据动态填充表格内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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和要显示的数据就可以了，这样是不是方便很多了？