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

163 阅读 0 评论 108 点赞

我是靠谱客的博主搞怪小虾米，最近开发中收集的这篇文章主要介绍使用jQuery模板来展现json数据的代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

完整代码：

复制代码代码如下:

 
$.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(/[rtn]/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); 
}) 

就是这么简单！