源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-09-21 19:15 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:使用jQuery模板来展现json数据的代码
完整代码:
[u]复制代码[/u] 代码如下:
$.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() + " # >"; }
使用方法: 首先声明这个模板
[u]复制代码[/u] 代码如下:
<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>
然后使用
[u]复制代码[/u] 代码如下:
$(function(){ var json={"items":{"pm":{"key":"value","key1":"value1"},"pm1":"pmvalue"}}; var output=$('#template').parseTemplate(json); $('#cc').html(output); })
就是这么简单!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部