jQuery.tmpl.js组件使用

jQuery.tmpl.js是一款动态请求数据，然后自动拼装HTML的组件。很多时候ajax请求基本上都是请求JSON，XML等数据然后前端拼装html，这个真是一件很蛋疼的事儿。jquery.tmpl是给我们揉蛋的软妹，废话不说了，先看图，界面用了bootstrap，比较好看

然后点击生成按钮，模拟接受JSON生成html。

使用相当方便，只需要引入一个JS文件即可 jQuery.tmpl.js

http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js

<!DOCTYPE>
<html lang="zh-CN">
<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>jquery tmpl</title>

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
th{
	width:25%;
}
</style>
</head>
<body class="">

<!--jumbotron start-->
<div class=" jumbotron">
	<div class=" col-xs-offset-2">
	<h1>jQuery.tmpl实例</h1>
    <p>jQuery.tmpl.js是一款动态请求数据，然后拼接HTML的组件</p>
    <a class="btn btn-primary">了解更多 <span class="glyphicon glyphicon-ok"></span></a>
    </div>
</div>
<!--jumbotron end-->
<div class="container">
		
		<div class=" panel panel-info text-center">
			<div class="panel-heading">
				<button type="button" onclick="generate();"  class="btn btn-primary">生成 <i class="glyphicon glyphicon-repeat"></i></button>
				<small>点击按钮动态生成表格数据</small>
			</div>
			<table id="tr1" class="table table-striped table-hover table-bordered">
			<tr class="">
				<th>ID</th>
				<th>name</th>
				<th>num</th>
				<th>status</th>
			</tr>
			<script id="demo" type="text/x-jquery-tmpl">
				<tr>
					<td>{{= ID}}</td>
					<td>{{= Name}}</td>
					<td>${Number(Num)+1}</td>
					<td>${Status}</td>
				</tr>
			</script>
			</table>
		</div>
       
</body>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> 
<script src="http://cdn.bootcss.com/bootstrap-hover-dropdown/2.0.10/bootstrap-hover-dropdown.js"></script>
<script>
	<!-- 模拟生成数据 -->
	function generate(){
		var users = [{ ID: 'think8848', Name: 'Joseph Chan', Num: '1', Status: 1 }, { ID: 'aCloud', Name: 'MaryCheung', Num: '2'}];
		$("#demo").tmpl(users).appendTo('#tr1');
	}		
</script>
</html>

jQuery.tmpl.js组件使用

猜你喜欢