导入juicer
<script type="text/javascript" src="juicer-min.js"></script>
在js部分编写模板页面
<script id="connectionTpl" type="text/template">
<input type="hidden" value="{%id}" id="mid"/>
<div class="portlet-title">
<div class="caption">
<i class="icon-sitemap"></i>XXX
</div>
</div>
<div class="portlet-body flip-scroll">
<table class="table table-bordered table-striped table-condensed flip-content">
<thead class="flip-content">
<tr class="table-border-bottom" align="center">
<th style="width: 5%; word-wrap: break-word; word-break: break-all;">序号</th>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
</tr>
</thead>
<tbody>
{@if list.length==0}
<tr align="center"><td colspan="7"><font color="red">目前没有已关联的商品</font></td></tr>
{@/if}
{@each list as item,i}
<tr align="center" id="{%item.id}">
<td>{%i-0+1}</td>
<td><img src="{%item.thumbUrl}" class="iconStyle" /></td>
<td>{%item.productName}</td>
<td>{@if item.productCode!=null}{%item.productCode}{@/if}</td>
<td style="text-align:right;">{%item.salesVolume}</td>
<td>
{@if item.status=='I' }
<i class="icon-remove" />
{@/if}
{@if item.status=='A' }
<i class="icon-ok" />
{@/if}
</td>
<td value="{%item.id}">
<span class='single{@if item.connection=='S'} highlighticon{@/if}' title="XXX"><i class="icon-long-arrow-right"></i></span>
<span style="margin-left:5px;" class='both{@if item.connection=='B'} highlighticon{@/if}' title="XXX"><i class="icon-resize-horizontal"></i></span>
</td>
</tr>
{@/each}
</tbody>
</table>
</div>
<div class="pull-right">
<button id="addConnection" class="btn blue" value="{%id}">XXX</button>
<div>
<div class="pull-right" style="margin-top:20px;"></div>
</script>
这里面有一些条件判断语句,还有一些是和后台绑定数据的语句。
使用js调用这个模板
var connectionTpl =document.getElementById('connectionTpl').innerHTML;
$('#connection').html(juicer(connectionTpl, {id:id,list:products}));
然后就成了。
总结
我目前就学了这么多,写这儿算是给自己一个备份,欢迎评论。谢谢。