欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

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

时间:2021-06-06 08:44:45|栏目:jquery|点击:
完整代码:
复制代码 代码如下:

$.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);
})

就是这么简单!

上一篇:WEB前端开发都应知道的jquery小技巧及jquery三个简写

栏    目:jquery

下一篇:用jquery统计子菜单的条数示例代码

本文标题:使用jQuery模板来展现json数据的代码

本文地址:http://www.codeinn.net/misctech/136113.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有