让jquery.tmpl.js支持index序号

在写Web程序时,想简单处理会使用JS模板,常用的是Jquery的jquery.tmpl.js插件。整个插件还是比较好用的,后续有机会结合实际应用案例,分享下应用方法。

本次文章想分享的一点是其中的一个很小的细节:支持行标index。

具体的使用场景是:通过表格展示数据,同时第一列为序号,会存在删除、新增行的按钮操作。

 <!DOCTYPE html>
<html>
<head>
<script src="../_common/jquery-1.12.2.min.js"></script>
<script src="../_common/jquery.tmpl.min.js"></script>
</head>
<body>
<table id="list">
<tr class="tableHead">
<td>序号</td>
<td>名称</td>
<td>代码</td>
<td>类型</td>
</tr>
</table>
<script id="tmp" type="text/x-jquery-tmpl">
<tr>
<td>${Number(id)+}</td>
<td>${name}</td>
<td>${code}</td>
<td>${type}</td>
</tr>
</script>
<script type="text/javascript">
$(document).ready(function () {
var list = [
{ id:"", name: "javascript", code: "001", type: "web" },
{ id:"", name: "asp.net", code: "004", type: "server" },
{ id:"", name: "sql", code: "005", type: "db" }
];
$("#tmp").tmpl(list).appendTo("#list");
});
</script>
</body>
</html>

如上,如果要实现行序号,则需要在数据集合中加入一个属性返回行号,这样就会导致非常麻烦。当存在删除或新增行时,若要刷新展示,还需要刷新数据的id属性,不方便操作。其实如果能够利用table的rowindex或者其他的方式,可以较好的利用dom属性或数组index来处理,那就会方便很多了。

基于此思路,我们改造jquery.tmpl.js的tmpl函数。如下图,对于未压缩的插件源码,处理如下:

让jquery.tmpl.js支持index序号

为了避免数据集合中存在index对象,故特意加了一个$以作区分,使用时用$index属性进行取值即可。

若是需要改造jquery.tmpl.min.js,由于做了代码混淆,搜索map函数,第一个调用的地方按照如上逻辑调整即可。

调整后的调用方式:

 <!DOCTYPE html>
<html>
<head>
<script src="../_common/jquery-1.12.2.min.js"></script>
<script src="../_common/jquery.tmpl.min.js"></script>
</head>
<body>
<table id="list">
<tr class="tableHead">
<td>序号</td>
<td>名称</td>
<td>代码</td>
<td>类型</td>
</tr>
</table>
<script id="tmp" type="text/x-jquery-tmpl">
<tr>
<td>${$index+}</td>
<td>${name}</td>
<td>${code}</td>
<td>${type}</td>
</tr>
</script>
<script type="text/javascript">
$(document).ready(function () {
var list = [
{ name: "javascript", code: "001", type: "web" },
{ name: "asp.net", code: "004", type: "server" },
{ name: "sql", code: "005", type: "db" }
];
$("#tmp").tmpl(list).appendTo("#list");
});
</script>
</body>
</html>

如上为新的调用方式,是不是方便了很多。

上一篇:jquery.tmpl.js 模板引擎用法


下一篇:Charlie's Change(完全背包+路径记忆)