摸索下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(/[\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);
})就是这么简单!








网友评论文明上网理性发言 已有0人参与
发表评论: