使用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);
})
就是这么简单!
相关文章
- php jquery教程下载,jquery 怎么下载
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- jQuery 替换元素中class的方法
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- jquery绑定与解绑元素事件
- jQuery实现页面滚动时自动加载内容详解编程语言
- JQuery初体验(建议学习jquery)
- Jquery实战_读书笔记1—选择jQuery
- 10个基于jQuery或JavaScript的WYSIWYG编辑器整理
- Jquery从头学起第四讲jquery入门教程
- jquery插件之easing使用
- Jquery知识点三jquery表单对象操作
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- jQuery中实现动画效果的基本操作介绍
- jQuery制作仿腾讯webqq用户体验桌面
- JQuery对class属性的操作实现按钮开关效果
- jQuery插件开发的两种方法及$.fn.extend的详解
- jquery为页面增加快捷键示例
- eclipse导入jquery包后报错的解决方法
- jquery跨域请求示例分享(jquery发送ajax请求)
- jquery禁用右键示例
- jQuery.holdReady()使用方法
- jQuery学习笔记之jQuery.fn.init()的参数分析
- jQuery学习笔记之创建DOM元素
- Jquery实现grid绑定模板
- jQuery中的read和JavaScript中的onload函数的区别