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> 相关推荐
学习web前端 2020-09-28
小焊猪web前端 2020-09-10
青蓝 2020-08-26
liduote 2020-08-13
Qc 2020-07-19
bowean 2020-06-28
starzhangkiss 2020-06-25
xustart0 2020-06-14
WinerChopin 2020-06-12
xxuncle 2020-06-05
WinerChopin 2020-06-03
wanwanwandj 2020-06-02
randeqi 2020-05-06
newcome 2020-04-29
风萧萧梦潇 2020-05-12
chenhaotao 2020-05-10
那些年写过的代码 2020-05-09
前端学习笔记 2020-04-26
viewerlin 2020-04-20