基于templatejs的html片段动态生成

勤能补拙孰能生巧 2013-09-11

基于

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

开发的一个利器。

相关推荐