jquery.tmpl 基础用法

全栈程序员站长

发布于 2022-09-07 16:48:40

2.4K0

发布于 2022-09-07 16:48:40

大家好，又见面了，我是你们的朋友全栈君。

jQuer.tmpl

通过动态请求返回数据时通过HTML显示到页面快速便捷实用的方法。只需要在预先定义好一个模板在动态数据返回后调用jQuery对应实现的方法即可对HTML进行拼接同时显示出来。并且定义模板时可以使用一些逻辑判断的标签。个人认为jQuer.tmpl有个不好的地方就是没有错误提示；例如在使用标签进行判断时可能有个地方字段写错的但是没有提示需要花一点时间去找问题，那就会有一些苦恼。

jQuery.tmpl的几种常用标签分别有： {动态数据字段名}, { {each}}, { {if}}, { {else}} 在jsp中使用标签时是需要在{}前加上”\”(\

示例1：${}

<table>
	<thead>
		<tr>
		  <th>用户ID</th>
		  <th>用户名称</th>
		</tr> 
	</thead>
	<tbody id="user_demo1">
		
	</tbody>
</table>
<script type="text/javascript"	src="javascript/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.tmpl.js"></script>

<script id="demo1" type="text/x-jquery-tmpl">
    <tr>
	  <td>${id}</td>
	  <td>${name}</td>
	</tr>
</script>
<script type="text/javascript">
	var data = [{id:1,name:"张三"},{id:2,name:"李四"}];//返回的数据需要是json数据
	$("#demo1").tmpl(data).appendTo('#user_demo1');
	//appendTo()是jQuery里的方法：把所有匹配的元素追加到另一个指定的元素元素集合中。
</script>

示例2：{ {if}} { {else}} { {/if}} 这里的if else 有些不同于JavaScript中的(if else)用法而类似于(if() else if())

<table>
	<thead>
		<tr>
		  <th>用户ID</th>
		  <th>用户名称</th>
		</tr> 
	</thead>
	<tbody id="user_demo1">
		
	</tbody>
</table>
<script type="text/javascript"	src="javascript/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.tmpl.js"></script>

<script id="demo1" type="text/x-jquery-tmpl">
    <tr>
		{
  
  {if ${id == 1}}}
		  <td style="color:gules">${id}</td>
		{
  
  {else ${id == 2}}}
		  <td style="color:yellow">${id}</td>
		{
  
  {else}}
		  <td>${id}</td>
		{
  
  {/if}}
	    <td>${name}</td>
	</tr>
</script>
<script type="text/javascript">
	var data = [{id:1,name:"张三"},{id:2,name:"李四"},{id:3,name:"李四"}];//返回的数据需要是json数据
	$("#demo1").tmpl(data).appendTo('#user_demo1');
	//appendTo()是jQuery里的方法：把所有匹配的元素追加到另一个指定的元素元素集合中。
</script>

示例3：{ {each}} 用于循环 { {each(j,major) majors}}{ {/each}} majors循环的数组，major表示对象，j表示索引（从0开始）

<table>
	<thead>
		<tr>
		  <th>用户ID</th>
		  <th>用户名称</th>
		  <th>专业</th>
		</tr> 
	</thead>
	<tbody id="user_demo1">
		
	</tbody>
</table>
<script type="text/javascript"	src="javascript/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.tmpl.js"></script>

<script id="demo1" type="text/x-jquery-tmpl">
    <tr>
		<td>${id}</td>
	    <td>${name}</td>
		<td>
		{
  
  {each(i,major) majors}}
			${major.name}
		{
  
  {/each}}
		</td>
	</tr>
</script>
<script type="text/javascript">
	var data = [{id:1,name:"张三",majors:[{name:"英语"},{name:"数学"}]},{id:2,name:"李四",majors:[{name:"语文"},{name:"数学"}]},{id:3,name:"李四",majors:[{name:"政治"},{name:"数学"}]}];//返回的数据需要是json数据
	$("#demo1").tmpl(data).appendTo('#user_demo1');
	//appendTo()是jQuery里的方法：把所有匹配的元素追加到另一个指定的元素元素集合中。
</script>

以上jquer.tmpl的一些基础用法，如果有什么不对的地方还请大神指出。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/148665.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

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

html