前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用jquery的tmpl构建复杂表格

使用jquery的tmpl构建复杂表格

作者头像
一笠风雨任生平
发布2019-08-02 11:11:07
8300
发布2019-08-02 11:11:07
举报
文章被收录于专栏:服务化进程

Tmpl提供了几种tag: ${}:等同于{{=}},是输出变量,通过了html编码的。 {{html}}:输出变量html,但是没有html编码,适合输出html代码。 {{if }} {{else}}:提供了分支逻辑。 {{each}}:提供循环逻辑,$value访问迭代变量。

现在主要介绍利用tmpl构造复杂一点的表格,比如说动态加载数据以及单元格合并

代码语言:javascript
复制
<div class="shadow">
			<div class="title"><span>打分信息</span></div>
   				<div class="content" id="cengji01" style="display:">
			     <table width="100%" border="1" cellspacing="0" class="tableborder">
					<tr class="tr_normal">
				        <td class="table_title" >项目</td>
				        <td class="table_title">评估细项</td>
				        <td class="table_title">分值</td>
				        <td class="table_title">评分标准</td>
				        <td class="table_title">评分</td>
				     </tr>
					<tbody id="templateItemList">
					</tbody>
				</table>
				<script id="templateItemListTmpl" type="text/x-jquery-tmpl">
						{{each(i,data) template.itemList}}
							<tr class="tr_normal" onmouseover="this.className='tr_act'" onmouseout="this.className='tr_normal'">
							{{if i==0||template.itemList[i-1].parentItemName!=data.parentItemName}}
								<td rowspan="{{= data.rowCount}}" width="8%">{{= data.parentItemName}}</td>
							{{/if}}
								<td width="8%">{{= data.itemName}}</td>
								<td width="5%">{{= data.maxScore}}</td>
								<td width="60%">{{= data.itemDesc}}</td>
								<td width="5%">{{= data.itemScore}}</td>
							</tr>
						{{/each}}
						<tr>
							<td colspan="4" align="center">合计</td>
							<td style="font-weight:bold;"> {{= template.sumScore}}</td>
						</tr>
						{{each(i,data) template.otherItemList}}
							<tr class="tr_normal" onmouseover="this.className='tr_act'" onmouseout="this.className='tr_normal'">
								<td width="8%">{{= data.parentItemName}}</td>
								<td width="8%" colspan="3" align="center">{{= data.itemDesc}}</td>
								<td width="5%">{{= data.itemScore}}</td>
							</tr>
						{{/each}} 
						<tr>
							<td>最后得分</td>
							<td colspan="4" align="center" style="font-weight:bold;color:red;">{{= template.allSumScore}}</td>
						</tr>
						<tr>
							<td>综合评语</td>
							<td colspan="4"> 希望加强管理,继续努力!</td>
						</tr>
				</script>
			</div>
		</div>
代码语言:javascript
复制
$().ready(function() {
            $('#templateItemListTmpl').tmpl(data.data).appendTo('#templateItemList');
	})

效果图如下

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档