摘要:本篇教程介绍了jQuery教程 template.js插件入门学习,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
本篇教程介绍了jQuery教程 template.js插件入门学习,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
<
template.js插件在表格渲染方面还是极其出色的,当数据在异步加载后不用使用传统的方式,在ajax里面拼接html语句加载表格,直接用这个插件将ajax传回来的json数组直接渲染在前端中,省下了不少时间。
我使用template.js主要是满足项目实现为目的,不是深入探究,总结一下我在项目里基本使用这个插件哪些功能,主要是数据的展示,each循环以及if语句简单使用。
基本上会了这些,使用ajax异步加载出来一个表格是没什么问题的。
1、引入template.js插件
引用jquery.template.js
2、基本使用方法:在.jsp中需要用到此模板渲染表格的地方,标记id:
1 <table class="table-form" id="demoTable"></table>
一般在jsp的底部使用:
1 <script type="text/html" id="demoTableTemp">
2 <tr>
3 <td>\${index}</td>
4 <td>\${name}</td>
5 <td>\${sex}</td>
6 <td>\${age}</td>
7 </tr>
8 </script>
在js中使用异步加载一般得到的数据格式需要是一个数组,组装格式如下:
1 [{
2 "index":1,
3 "name":"张三",
4 "sex":"男",
5 "age":"18"
6 },{
7 "index":2,
8 "name":"李四",
9 "sex":"女",
10 "age":"18"
11 }]
js中将此data引入jsp中时应用:(不仅可以使用id,也可以使用.class)
1 $('#demoTableTemp').tmpl(data).appendTo('#demoTable');
此时会按照数组的格式,循环渲染表格模板。
3、each循环:表格行中单元格是数组的情况,需要用到循环嵌套的方法:(暂时没有很好的方法)
如果组装的data中,此项是数组时,需要将它再次组装,组装成对象内嵌套对象的模式,比如:
此时应将它组装为:
1 [
2 {
3 ...
4 "likes": {
5 "like": "apple",
6 "like": "football"
7 }
8 },
9 {
10 ...
11 "likes": {
12 "like": "orange",
13 "like": "book"
14 }
15 }
16 ]
此时在jsp的底部应当使用each循环:
1 <script type="text/html" id="demoTableTemp">
2 <tr>
3 <td>\${index}</td>
4 <td>\${name}</td>
5 <td>\${sex}</td>
6 <td>\${age}</td><td>
7 {{each likes}}
8 <p>\${like}</p>
9 {{/each}}
10 </td>
11 </tr>
12 </script>
4:使用if判断语句:
比较简单的属于单双行不一致问题:
使用{{if (index+1)%2 == 0 }}{{/if}}和{{if (index+1)%2 == 1 }}{{/if}}可以满足基本的判断语句
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号