在写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. JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-003Table per concrete class with unions(@Inheritance(strategy = InheritanceType.TABLE_PER_CLASS)、<union-subclass>)

    一.代码 1. package org.jpwh.model.inheritance.tableperclass; import org.jpwh.model.Constants; import ja ...

  2. Java-在线聊天系统-线程

    一.概述 1.目标:在上一个版本非线程的聊天系统中,出于要不断监听接收新client和接收client发出的信息,把accept()和DataInputStream.readUTF()分别写在了whi ...

  3. Android笔记——RecyclerView替代ListView

    ListView是常用列表控件,但设置Adapter时自定义代码较为复杂,因此Android3.0后,增加RecyclerView替代ListView RecyclerView没有提供OnItemCl ...

  4. Dire Wolf ---hdu5115（区间dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5115 题意:有一排狼,每只狼有一个伤害A,还有一个伤害B.杀死一只狼的时候,会受到这只狼的伤害A和这只 ...

  5. [软件]XAMPP错误解决

    // 错误1  (在运行安装包时候出现) // 错误2 1. 找到这个文件 这个文件  要将 config.inc.php 中 $cfg['Servers'][$i]['host'] = ’local ...

  6. 【原创】【Android New Features】—— 关于ADT 17的BuildConfig.DEBUG

          在日常开发中,我们使用android.util.Log来打印日志,方便我们的开发调试.但是在打包发布时,需要手工把Log关闭,多少会有些不便,而且不排除打包者忘记关闭Log的情况.那么有没 ...

  7. 标准类型内建函数 str()和 repr() (及 `` 运算符) 简单介绍

    内建函数 str() 和 repr() 或反引号运算符(``) 可以方便的以字符串的方式获取对象的内容.类型.数值属性等信息.str()函数得到的字符串可读性好, 而repr()函数得到的字符串通常可 ...

  8. 在linux系统下检查postgresql数据库安装，登录数据库及简单的查看数据库

    1.    检查Linux系统是否安装数据库 首先查看自己的系统是否安装了postgresql数据库命令如下: rpm -qa | grep postgresql 如果没有显示查询结果(如下图所示)说 ...

  9. java中时间的获取（二）

    java中时间的获取2 /** * 获取数据库操作记录时间 */ public static String getOpreateDbTime() { Calendar c = Calendar.get ...

  10. JS生成指定长度的随机数

    /** * 生成指定长度的UUID * @param len * @param radix * @returns uuid * eg: createUUID(8, 2) "01001010& ...