在写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函数。如下图，对于未压缩的插件源码，处理如下：

为了避免数据集合中存在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支持index序号的更多相关文章

  1. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  2. MVC - 11（下）jquery.tmpl.js +ajax分页

    继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...

  3. PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例

    PHP+jQuery.photoClip.js支持手势的图片裁剪上传实例,在手机上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度,在电脑上鼠标滚轮为缩放,双击则顺时针旋转90度. 下面让我们来看 ...

  4. 修改 jquery.validate.js 支持非form标签

    尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...

  5. jquery.tmpl.js 模板引擎用法

    1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...

  6. 修改二维码生成插件jquery.qrcode.js支持加入自定义LOGO

    1,将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> & ...

  7. Jquery 模板插件 jquery.tmpl.js 的使用方法(2):嵌套each循环,temp调用(使用预编译的模板缓存)

    直接上代码吧 一:主窗口 /*#region SendChooseTargetTemplate 发送候选人主窗口模板*/ var SendChooseTargetTemplate = ''; Send ...

  8. jquery.tmpl.js使用外部 jQuery Template文件

    $.get('/js/templates/filename.html', function(template) { $.tmpl(template, data).appendTo('#whatever ...

  9. jquery tmpl 详解

    官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意 ...

随机推荐

  1. jQuery 实验教程

    jQuery 实验教程 jQuery 简介.语法及事件处理 jQuery 以其特有的简练的代码风格,极大得改变了 JavaScript 代码编写的方式.本教程以实例代码为基础,讲解 jQuery 的使 ...

  2. 对QT的理解——能在公司里不做Java，不做很偏门的产品，不使用偏门的语言，还有钱挣，要有感恩的心

    我的理解: QT做应用软件可以很强大,界面足够漂亮(最有意思的是QSS,让我刮目相看),应该是足够了.同时QT也提供了源码,不过超级复杂,难以理解,所以还是无法深入底层.另外它提供了一个额外的好处,就 ...

  3. jenkins集成自动化部署插件(一) deploy-plugin

    在实际情况中项目构建成功,特别是web项目构建成功是需要将war放到对应的服务上面,进行运行(测试的阶段可能就是发布到测试服务器上面)这样只需要指定构建的触发策略就可以自动构建以及部署,省去不少人工的 ...

  4. 下载的时候如果文件名是中文就变成zip.zip

    struts2 /WEB-INF/web.xml <?xml version="1.0" encoding="UTF-8"?> <web-ap ...

  5. USACO Section 2.2: Subset Sums

    dp题,一碰到dp我基本就是跪,搜了网上的答案分两种,一维和二维. 先讲二维,sum[i][j]表示前i个数的subset里差值为j的分法数量.当加入数字i时,有两种选择,某一个set和另外一个set ...

  6. 自定义View(9)关于onLayout

    1,何时被调用 当外层容器组件调用其内部组件的layout(l,r,t,b)时,内部组件的onLayout就被调用.与onMeasure类似. 2,注意 onLayout对ViewGroup及子类才有 ...

  7. Hadoop集群（第10期副刊）_常用MySQL数据库命令

    1.系统管理 1.1 连接MySQL 格式: mysql -h主机地址 -u用户名 -p用户密码 举例: 例1:连接到本机上的MySQL. 首先在打开DOS窗口,然后进入目录 mysqlbin,再键入 ...

  8. UC编程之线程

    线程--隶属于进程,是进程中的程序流.操作系统支持多进程,每个进程内部支持多线程.多线程并行(同时执行)代码. 进程--重量级的,每个进程都需要独立的内存空间. 线程--轻量级的,线程不拥有独立的内存 ...

  9. 漫游Kafka设计篇之性能优化

    Kafka在提高效率方面做了很大努力.Kafka的一个主要使用场景是处理网站活动日志,吞吐量是非常大的,每个页面都会产生好多次写操作.读方面,假设每个消息只被消费一次,读的量的也是很大的,Kafka也 ...

  10. Jqgrid入门-Jqgrid格式化数据(九)

    上一章已经说明了在Jqgrid中如何对数据分组,这一章主要探讨如何格式化Jqgrid中的数据.何谓格式化呢?举个例子,比如对时间格式化处理,去掉后面的时分秒:对数字进行处理,加上千分位分隔符,小数的保 ...