作家
登录

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

作者: 来源:www.28hudong.com 2013-03-30 01:15:00 阅读 我要评论

完整代码: 复制代码 代码如下: $.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); }) 就是这么简单!

  推荐阅读

  javascript 类和命名空间的模拟代码

先上一段最简单的: 复制代码 代码如下: // 以下几行代码展示了命名空间、类、以及函数的模拟定义和使用: NameSpace = {}; NameSpace.Class = function(){ this.Method = function(info){alert(info);} }; new Na>>>详细阅读


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

地址:http://www.17bianji.com/kaifa2/JS/25572.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)