jquery-tmpl 插件
做项目时页面上有处功能是：在页面有处列表、有添加，我添加修改或删除后要刷新这个列表，首先想到的是局部刷新，但我们一般说的局部刷新就是利于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 插件的更多相关文章
- jquery tmpl插件
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
- JSON对象配合jquery.tmpl.min.js插件，手动攒出一个table
jquery.tmpl.min.js 首先下载这个插件 1.绑定json那头的键 //TemplateDDMX 这个是这段JS的ID,这个必须写!!!!!! //${}为json的键的值,必须要填写正 ...
- web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo
背景:webform或者mvc下实现插件快速分页 ps:我这里用的mvc开发的,数据库连接.用的ADO.NET实体数据模型 此案例下载地址(内含需要用到的一个插件与数据库):http://downlo ...
- JQuery模板插件-jquery.tmpl
转载:https://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html 在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQ ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- jquery tmpl 详解
官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意 ...
- jQuery tmpl用法总结
之前很是头疼循环数据的渲染,搞一大堆的命名,一点点的赋值,很是麻烦,今天学习了一下jQuery插件tmpl,下面抛出一些使用方法,供以后参考: 官方网址:http://web.archive.org/ ...
- jQuery .tmpl() 用法
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
- 让jquery.tmpl.js支持index序号
在写Web程序时,想简单处理会使用JS模板,常用的是Jquery的jquery.tmpl.js插件.整个插件还是比较好用的,后续有机会结合实际应用案例,分享下应用方法. 本次文章想分享的一点是其中的一 ...
- [转载]jquery tmpl使用方法
动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...
随机推荐
- Netty的ChannelHandler,ChannelHandlerContext,ChannelPipeline
本小节一起学习一下ChannelHandler,ChannelHandlerContext,ChannelPipeline这三个Netty常用的组件,不探究它们的底层源码,我们就简单的分析一下用法 首 ...
- DataGrid——行高不起作用
问题1:rowStyler 设置行高不起作用: 在 DataGrid 组件中,提供了 rowStyler 函数,用于设置行的css 样式,但是实践发现,对于height设置不起作用.跟踪代码发现如下: ...
- 网易新闻页面信息抓取（htmlagilitypack搭配scrapysharp）
转自原文 网易新闻页面信息抓取(htmlagilitypack搭配scrapysharp) 最近在弄网页爬虫这方面的,上网看到关于htmlagilitypack搭配scrapysharp的文章,于是决 ...
- ajax 回调函数
回调函数 如果要处理$.ajax()得到的数据,则需要使用回调函数.beforeSend.error.dataFilter.success.complete. beforeSend 在发送请求之前调用 ...
- Git(四):Git远程操作详解
转: http://www.ruanyifeng.com/blog/2014/06/git_remote.html Git是目前最流行的版本管理系统,学会Git几乎成了开发者的必备技能. Git有很多 ...
- VMWare中三种网络连接模式的区别
VMWare中有桥接.NAT.host-only三种网络连接模式,在搭建伪分布式集群时,需要对集群的网络连接进行配置,而这一操作的前提是理解这三种网络模式的区别. 参考以下两篇文章可以更好的理解: V ...
- Invalid command 'Header', perhaps misspelled or defined by a module not included in the server configuration
在Apache的配置文件 httpd.conf 中开启 LoadModule headers_module modules/mod_headers.so 即可解决这个问题.
- 前端开发之CSS入门篇
一.CSS介绍和语法 二.CSS引入方式 三.基本选择器 四.高级选择器 五.伪类选择器 六.伪元素选择器 1️⃣ CSS介绍和语法 1. CSS的介绍 (1)为什么需要CSS? 使用css的目的就 ...
- 如何提高web页面的性能
1.浏览器渲染原理解析 想要提高网页的性能,首要的便是要理解浏览器渲染原理,下面关于浏览器的原理解析,我们以chrome内核webkit为例,其他内核的浏览器原理也基本大同小异,可触类旁通. 如上图所 ...
- linux开机自检配置文件fstab变只读无法修改问题
控制linux开机自检的配置文件是/etc/fstab,在最近用的服务器中,发现fstab变成了只读权限,无法修改. 解决方法:RH5下,因磁盘改变,而导致系统停在Ctrl+d,此时需输入密码进入修改 ...