基于templatejs的html片段动态生成

 

基于

template.js

的

html

片段动态生成

 

本人由于一直从事

web

开发，因此在页面中编写

javascript

就越来越多，随着

web2.0

的流行，在页面中以

json

（

JavaScript

Object

Notation

）为数据基础的

ajax

（

Asynchronous

JavaScript and XML

）页面呈现，也越来越多样和复杂。比如：基于

javascript

的动态表格

呈现。在以前，我一直是通过如下代码创建一个表格。

 

1.

 

创建表格

:

var

 tab = document.createElement(

"table"

);

2.

 

创建行

:

 

var

 row = tab.insertRow(tab.rows.length);

3.

 

创建单元格：

 

 

var

 cell = row.insertCell(row.cells.length);

4.

 

在单元格内插入内容：

 

cell.innerHTML =

"

内容

"

;

上述代码看上去不是很复杂，但是在实际应用中，要想适用千变万化的表格展现形式，就

会是一件让人头痛的事情。

我一直期望能有什么好的方法可以让我从这种直接的由

javascript

代码构建表格中解脱出来。

 

Jsp

（

Java Server Pages

）编写是我们在

j2ee

（

Java 2 Platform, Enterprise Edition

）

开发中最常用的技术。其中提供的

jstl

（

JSP Standard Tag Library

），提高了我们

jsp

编

写效率。

Jstl

中我经常会用到

<c:foreach>

循环标签，特别是遍历数据后用表格显示。

Jsp

本

身是一种基于模板的方式来显示数据，

只是它是在服务端运行生成代码。

如果在客户端也有一

种这样基于模板的方式显示数据，那么

javascript

动态生成表格不就迎刃而解了。经过请教

同事和上网查询，发现已经有人开发出了这种

javascript

功能，就是

template.js

。

 

比如现在要动态生成一个表格如下

:

 

 

区域

 

设备名称

 

端口名称

 

入端口

(

个

)

出端口

(

个

 

 

)

错包数

 

丢包数

 

错包数

 

丢包数

 

Area1

Device1

Port1

1

2

3

4

Area2

Device2

Port2

5

6

7

8

„

 

 

 

 

 

 

 

使用

template.js

将会非常简单。代码如下

:

1.

 

页面引入

template.js

文件。

 

<script

type=”text/javascript” src=”template.js”

></script>

 

 

2.

 

在页面任意地方插入如下

html

代码（也就是模板）。

 

<textarea id="template" style="display:none">

<table width="100%" border="0" align="center">

 

<tr>

 

  <td rowspan="2" >

区域

</td>

 

  <td rowspan="2" >

设备名称

</td>

 

  <td rowspan="2" >

端口名称

</td>

 

  <td colspan="2" >

入端口

(

个

)</td>

 

  <td colspan="2" >

出端口

(

个

)</td>

 

</tr>

 

<tr>

 

 

 

 

 

  <td  >

错包数

</td>

 

  <td  >

丢包数

</td>

 

  <td  >

错包数

</td>

 

  <td  >

丢包数

</td>

 

 

 

</tr>

{for el in ds}

 

<tr>

 

  <td >${el.areaName}

 

  

 

  </td>

 

  <td>${el.devName}

 

  </td>

 

  <td>${el.objName}

 

  </td>

 

  <td>

 

  ${el.inError}

 

  </td>

 

  <td>

 

  ${el.inDiscard}

 

  </td>

 

  <td>

 

  ${el.outError}

 

  </td>

 

  <td>

 

  ${el.outDiscard}

 

  </td>

 

 

 

</tr>

{forelse}

 

<tr>

 

  <td colspan="7" >

无数据

</td>

 

 

 

</tr>

{/for}

 

 

</table>

</textarea>

其中黄色标记的地方就是类似于

jsp

中的

<c:foreach>

标记。

 

3.

 

初始化模板。

 

template.js

中提供了

TrimPath.parseDOMTemplate(elementId)

方法来初始化模板。

 

参数

:elementId

就是模板（隐藏的

textarea

）的元素

id;

这里代码就是：

 

Var template = TrimPath.parseDOMTemplate(“template”);

 

 

4.

 

基于

json

数据生成

html

代码。

 

v

ar json = {“ds”:[{“areaName”:”

Area

1”,

 

 

 

 

 

“

devName

”:”device1”,

 

“objName”:”port1”,

 

“inError”:”1”,

 

“inDiscard”:”2”,

 

“outError”:”3”,

 

“outDiscard”:”4”

},

{“areaName”:”Area2”,

 

“devName”:”device2”,

 

“objName”:”port2”,

 

“inError”:”5”,

 

“inDiscard”:”6”,

 

“outError”:”7”,

 

“outDiscard”:”8”}

]};

template.js

提供了模板的

process

（

jsonData

）生成

html

，参数

jsonData

就是

json

数据。

 

var html = template.process(json);

此时

html

就是生成的表格代码，可以将表格代码插入到指定的

div

中，

 

如：

d

ocument.getElementById(“div1”).innerHTML= html;

 

就是这么简单，将复杂的表格完成了。当然这里只是介绍了

template.js

中的一部分，它还可

以使用条件判断，执行

javascript

方法。如果有兴趣可以研究一下，我相信这是将会是您进

行

web2.0

开发的一个利器。