使用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" οnmοuseοver="this.className='tr_act'" οnmοuseοut="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" οnmοuseοver="this.className='tr_act'" οnmοuseοut="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');
	})

 效果图如下

 

 

 

• 
• 大小: 40.5 KB

• 查看图片附件