做项目时页面上有处功能是：在页面有处列表、有添加，我添加修改或删除后要刷新这个列表，首先想到的是局部刷新，但我们一般说的局部刷新就是利于ajax去后台调用数据并显示，而这里是一整个列表就比较麻烦了，刷新重新加载列表时不止要加载列表，还需把table的标签这些都得重新加载下，写在js里或后台都得写 "<table class=\"datalist\">" 这之类的，太麻烦了 而后期要修改也不好改，于是乎就找到了jquery的tmpl插件，这个貌似还是官方在好几年已经不维护并停留在了beta版，不过还是有它的好用之处，下面源码实例说明：（有好几种用法，下面只说明本人用的感觉比较简单的一种）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

<script type="text/javascript">

    $(function () {

        var temp = [

            { Name: "blue", explain: "蓝色" },

            { Name: "red", explain: "红色" },

            { Name: "yellow", explain: "黄色" }

        ];

        $("#tempTemplate").tmpl(temp).appendTo("#tempList");

    })

</script>

</head>

<body>

        <ul id="tempList"></ul>

        <script id="tempTemplate" type="text/x-jquery-tmpl">

            <li>

                <b>${Name}</b> (${explain})

            </li>

        </script>

</body>

</html>

其实原理很简单，就好比把写好的标签当作模版，用模版出现的关键字去循环出里面的数据再显示出来。

我要刷新数据的话就用ajax从后台读取下数据并json格式传回即可。

插件官方下载地址：https://github.com/BorisMoore/jquery-tmpl

jquery-tmpl 插件的更多相关文章

  1. jquery tmpl插件

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

  2. JSON对象配合jquery.tmpl.min.js插件，手动攒出一个table

    jquery.tmpl.min.js 首先下载这个插件 1.绑定json那头的键 //TemplateDDMX 这个是这段JS的ID,这个必须写!!!!!! //${}为json的键的值,必须要填写正 ...

  3. web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo

    背景:webform或者mvc下实现插件快速分页 ps:我这里用的mvc开发的,数据库连接.用的ADO.NET实体数据模型 此案例下载地址(内含需要用到的一个插件与数据库):http://downlo ...

  4. JQuery模板插件-jquery.tmpl

    转载:https://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html 在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQ ...

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

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

  6. jquery tmpl 详解

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

  7. jQuery tmpl用法总结

    之前很是头疼循环数据的渲染,搞一大堆的命名,一点点的赋值,很是麻烦,今天学习了一下jQuery插件tmpl,下面抛出一些使用方法,供以后参考: 官方网址:http://web.archive.org/ ...

  8. jQuery .tmpl() 用法

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

  9. 让jquery.tmpl.js支持index序号

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

  10. [转载]jquery tmpl使用方法

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

随机推荐

  1. Asp.net 的工作原理

     转:http://www.cnblogs.com/linjiancun/archive/2010/09/14/1825662.html 1.1.1          Asp.net 的工作原理 ...

  2. **python实现的单例模式

    设计模式中,最简单的一个就是 “单例模式”. 所谓单例,是指一个类只有一个全局实例. 单例模式的使用场景: 1. Windows的Task Manager(任务管理器)就是很典型的单例模式(这个很熟悉 ...

  3. 详解Vue2.0生命周期

    网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...

  4. 分别用js和css实现瀑布流

    下午查找了瀑布流的相关原理,找了一些css3实现的还有js实现的,最后总结了一些比较简单的,易懂的整理起来 1.css3实现 只要运用到    column-count分列 column-width固 ...

  5. module 'tensorflow.contrib.rnn' has no attribute 'core_rnn_cell'

    #tf.contrib.rnn.core_rnn_cell.BasicLSTMCell(lstm_size) tf.contrib.rnn.BasicLSTMCell(lstm_size)

  6. Lunix7 开放指定端口

    systemctl unmask firewalld.service 此时可以正常启动Firewall了. 接下来顺便讲述一下Firewall的安装,及一些简单配置.   查看状态,看电脑上是否已经安 ...

  7. cacti-不出图形，cacti.log中出“ERROR: SQL Assoc Failed!

    [root@CactiEZ log]# tail cacti.log 2016年04月06日 14:53:16 PM - CMDPHP: Poller[0] ERROR: SQL Cell Faile ...

  8. 文件操作putc

    putc是把一个字符写入到指定文件中,每写一个字符,文件指针自动加1. 我写了一个随机生成255字符到d:/456.txt的程序. int main() { FILE *p; int num[255] ...

  9. charles4.2下载与破解方法以及配置https.RP

    Charles下载地址 地址:https://www.charlesproxy.com/latest-release/download.do 2. Charles破解 破解地址:https://www ...

  10. Photo1

    Story: 想象你是一个乡村的孩子,你有着健康的肤色,正在和家人一起坐在颠簸的马车上,赶着去城里买东西.正值夏日,黄昏的阳光晒在你的脸上,于是你的脸显得红扑扑的.路上满满的都是葱绿的草和参差不齐的树 ...