专栏首页服务化进程使用jquery的tmpl构建复杂表格

使用jquery的tmpl构建复杂表格

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

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

<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>
$().ready(function() {
            $('#templateItemListTmpl').tmpl(data.data).appendTo('#templateItemList');
	})

效果图如下

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微服务全链路跟踪:jaeger集成istio,并兼容uber-trace-id与b3

    在基于HTTP协议的分布式调用中,通常会使用HTTP Header来传递SpanContext的内容。常见的Wire Protocol包含Zipkin使用的b3...

    一笠风雨任生平
  • 将整个工程的GBK转为utf-8格式

    eclipse将整个工程转为utf-8时原先中文注释会变为乱码,13年时写了个脚本将整个文件的java以及配置文件转为utf-8格式,下面是代码

    一笠风雨任生平
  • 远程采集服务器指标信息(二)通过telnet执行远程命令

    现介绍java通过telnet执行命令采集服务器信息,比如说执行df、ls、top。

    一笠风雨任生平
  • HTML 5&CSS快速入门1.计算机中的文件2.网页组成4.HTML基础操作

    超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

    意气相许的许
  • 前端基础-HTML基础(三)

    table标签caption标签th/tr/td标签表格的删除与合并表格行列的删除表格行列的合并参考

    efonfighting
  • Mybatis案例超详解(上)

    本来是想像之前一样继续跟新Mybatis,但由于种种原因,迟迟没有更新,快开学了,学了一个暑假,博客也更新了不少,我觉得我得缓缓,先整合一些案例练练,等我再成...

    泰斗贤若如
  • 前端学习笔记之HTML body内常用标签

    body中的标签是会显示到浏览器窗口中的,body内的标签只有一个作用就是用来标记语义的,语义指的是从字面意思就可以理解被标记的内容是用来做什么的

    Jetpropelledsnake21
  • HTML代码片段

    Joel
  • html table表格 - 美女信息

    Devops海洋的渔夫
  • jQuery实现Checkbox中项目开发全选全不选的使用

    1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Checkbox的练习</title> ...

    别先生

扫码关注云+社区

领取腾讯云代金券