js template 和 Mustache。Mustache额使用
2016-03-14 09:15
465 查看
实例代码:
<table id="contentTable" class="table table-striped table-bordered table-condensed">
<thead><tr><th>序号</th><th>优化时间</th><th>优化前总能耗</th><th>优化后总能耗</th><th>优化后效果评估</th><th>附件</th></thead>
<tbody id="tableList"></tbody>
</table>
<script type="text/template" id="tableListTpl">
{{#list}}
<tr>
<td>{{id}}</td>
<td>{{yhTime}}</td>
<td>{{yhqEnergy}}</td>
<td>{{yhhEnergy}}</td>
<td>{{yhqResult}}</td>
<td>{{appendix}}</td>
</tr>
{{/list}}
</script>
var param = $("#searchForm").serialize();
// 异步请求
$.get(ctxStatic + "/modules/easysite/xypjGrid.json", param, function(result){
// 数据
var tpl = $("#tableListTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, "");
$("#tableList").html(Mustache.render(tpl, result));
// 分页
$(".pagination").html(result.page);
});
<table id="contentTable" class="table table-striped table-bordered table-condensed">
<thead><tr><th>序号</th><th>优化时间</th><th>优化前总能耗</th><th>优化后总能耗</th><th>优化后效果评估</th><th>附件</th></thead>
<tbody id="tableList"></tbody>
</table>
<script type="text/template" id="tableListTpl">
{{#list}}
<tr>
<td>{{id}}</td>
<td>{{yhTime}}</td>
<td>{{yhqEnergy}}</td>
<td>{{yhhEnergy}}</td>
<td>{{yhqResult}}</td>
<td>{{appendix}}</td>
</tr>
{{/list}}
</script>
var param = $("#searchForm").serialize();
// 异步请求
$.get(ctxStatic + "/modules/easysite/xypjGrid.json", param, function(result){
// 数据
var tpl = $("#tableListTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g, "");
$("#tableList").html(Mustache.render(tpl, result));
// 分页
$(".pagination").html(result.page);
});
相关文章推荐
- 快乐的JS正则表达式(二)
- AJAX实现跨域的三种方法(代理,JSONP,XHR2)
- 利用d3.js绘制雷达图
- js中(function(){…})()立即执行函数写法理解
- [RxJS] Wrap up
- [RxJS] Sharing Streams with Share
- JS表格元素排序
- 《JavaScript语言精粹》笔记
- Javascript猜数字游戏
- JSP自定义标签简单入门教程
- javascript实现PC网页里的拖拽效果
- javascript实现数组去重的多种方法
- 使用javascript插入样式
- 基于javascript html5实现3D翻书特效
- 原生javascript+css3编写的3D魔方动画旋扭特效
- javascript复制数组
- 说说JSON和JSONP,也许你会豁然开朗
- 深入理解JavaScript系列
- JavaScript 小技巧
- JS处理事件小技巧