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>

View Code

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

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

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

转载于:https://www.cnblogs.com/dangzhensheng/p/3897569.html

jquery-tmpl 插件相关推荐

JQuery模板插件jquery.tmpl-动态ajax扩展
在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...
jQuery.tmpl.js
1.这个插件挺好用的,可以用它来代替微软的gridview,前提是您用了asp.net mvc模式开发下面是找到的一些英文资料,大家可以参考下网址如下: http://api.jquery.com ...
Jquery.tmpl
它是一个基于jquery的模板展示插件,有了它就可以去展示JSON数据渲染到HTML页中! 一.使用方法引入Jquery 引入 tmpl <script src="../Script ...
php 掌握jquery,完全掌握jquery tmpl模板
之前用模板渲染都是用angular,无意间发现了jquery tmpl这种轻量级,其文档在这里,本文主要为大家带来一篇jquery tmpl模板(实例讲解).小编觉得挺不错的,现在就分享给大家,也给大 ...
jQuery .tmpl() 用法
参考效果: DEMO 下载: jquery-tmpl-master 动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回 ...
jQuery .tmpl(), .template()学习
昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里. 官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][option ...
放弃用你的InnerHTML来输出HTML吧，jQuery Tmpl不详细讲解
在Ajax横道的今天,我们在页面交互上有了更高的要求,动态生成HTML毫无疑问是其中的一种.动态生成HTML的方式多种多样,其核心不外乎在前段(JS)或者后端(C#/PHP-)将数据组装成我们想要的模 ...
[原]jQuery .tmpl(), .template()学习
昨晚无意中发现一个有趣的jQuery插件.tmpl(),其文档在这里. 官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][option ...
jQuery.fly插件实现添加购物车抛物线效果
样例使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始 ...
jquery倒计时插件可自定义多个倒计时间
jquery倒计时插件设置多个自定义倒计时时间,任意设置天.小时.分钟.秒倒计时间功能. 查看演示>> <!DOCTYPE html PUBLIC "-//W3C//DTD ...

jquery-tmpl 插件

jquery-tmpl 插件相关推荐

最新文章

热门文章