zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

2023-06-13 09:14:25 时间
完整代码:
复制代码代码如下:

$.fn.parseTemplate=function(data)
{
varstr=(this).html();
var_tmplCache={}
varerr="";
try
{
varfunc=_tmplCache[str];
if(!func)
{
varstrFunc=
"varp=[],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("")
+"");}returnp.join("");";

//alert(strFunc);
func=newFunction("obj",strFunc);
_tmplCache[str]=func;
}
returnfunc(data);
}catch(e){err=e.message;}
return"<#ERROR:"+err.toString()+"#>";
}

使用方法:

首先声明这个模板

复制代码代码如下:

<scriptid="template"type="text/html">
<tablestyle="width:400px;">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>date</th>
<th>type</th>
</tr>
</thead>
<tbody>
<#

varxing=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(){
varjson={"items":{"pm":{"key":"value","key1":"value1"},"pm1":"pmvalue"}};
varoutput=$("#template").parseTemplate(json);
$("#cc").html(output);
})

就是这么简单!