使用jQuery模板来展现json数据的代码


Posted in Javascript onOctober 22, 2010

完整代码:

$.fn.parseTemplate = function(data) 
{ 
var str = (this).html(); 
var _tmplCache = {} 
var err = ""; 
try 
{ 
var func = _tmplCache[str]; 
if (!func) 
{ 
var strFunc = 
"var p=[],print=function(){p.push.apply(p,arguments);};" + 
"with(obj){p.push('" + 
str.replace(/[\r\t\n]/g, " ") 
.replace(/'(?=[^#]*#>)/g, "\t") 
.split("'").join("\\'") 
.split("\t").join("'") 
.replace(/<#=(.+?)#>/g, "',$1,'") 
.split("<#").join("');") 
.split("#>").join("p.push('") 
+ "');}return p.join('');"; //alert(strFunc); 
func = new Function("obj", strFunc); 
_tmplCache[str] = func; 
} 
return func(data); 
} catch (e) { err = e.message; } 
return "< # ERROR: " + err.toString() + " # >"; 
}

使用方法:

首先声明这个模板

<script id="template" type="text/html"> 
<table style="width:400px;"> 
<thead> 
<tr> 
<th>name</th> 
<th>age</th> 
<th>date</th> 
<th>type</th> 
</tr> 
</thead> 
<tbody> 
<# var xing = items.pm; 
#> 
<tr> 
<td> 
<#= xing.key #> 
</td> 
<td> 
<#= xing.key1 #> 
</td> 
<td> 
<#= xing.key #> 
</td> 
<td> 
<#= items.pm1 #> 
</td> 
</tr> 
<# 
#> 
</tbody> 
</table> 
<br /> 
<#= items.pm.length #> 记录 
</script>

然后使用
$(function(){ 
var json={"items":{"pm":{"key":"value","key1":"value1"},"pm1":"pmvalue"}}; 
var output=$('#template').parseTemplate(json); 
$('#cc').html(output); 
})

就是这么简单!
Javascript 相关文章推荐
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
跨浏览器的事件对象介绍
Jun 27 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
jQuery 表单验证扩展(四)
Oct 20 #Javascript
jQuery 表单验证扩展(三)
Oct 20 #Javascript
jQuery 表单验证扩展代码(二)
Oct 20 #Javascript
事件模型在各浏览器中存在差异
Oct 20 #Javascript
自写简单JS判断是否已经弹出页面
Oct 20 #Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 #Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 #Javascript
You might like
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
js 动态选中下拉框
2009/11/26 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
Python测试人员需要掌握的知识
2018/02/08 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
django自带调试服务器的使用详解
2019/08/29 Python
详解如何修改python中字典的键和值
2020/09/29 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
家长学校实施方案
2014/03/15 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
四风问题对照检查材料
2014/09/22 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python