velocity 轻量级模板 接收实体在前端展示

div class="table-responsive">
<table class="table table-custom">
<thead>
<tr>
<th style="width: 40px;">
<div class="checkbox check-transparent">
<input type="checkbox" value="1" id="allchck">
<label for="allchck"></label>
</div>
</th>
<th class="" style="min-width: 150px;">Banner图</th>
<th class="">链接地址</th>
<th class="">排序</th>

<th class="">发布时间</th>
<th class="">下架时间</th>

<th class="text-center" style="width: 70px;">操作</th>
</tr>
</thead>
<tbody><style>.bigImg:hover{position: absolute;width: 300px;height: auto;z-index: 1;}</style>
#if($page.hasContent())
#foreach($_banner in $page.content)
<tr>
<td>
<div class="checkbox check-transparent">
<input type="checkbox" value="1" id="chck-$!{_banner.id}" data-id="$!{_banner.id}">
<label for="chck-$!{_banner.id}"></label>
</div>
</td>
<td title="$!esc.html(<img src='$_banner.imageUrl'>)">$!esc.html<img class="bigImg"   src="$_banner.imageUrl" width="20px" height="20px" ></td>
<td title="$!esc.html($_banner.imageUrl)"><a href="$!{_banner.imageUrl}" target="_blank">$!esc.html($_banner.imageUrl)</a></td>
<td title="$!esc.html($_banner.seq)">$!esc.html($_banner.seq)</td>
<td title="$!esc.html($_banner.publishDate)">$!esc.html($_banner.publishDate)</td>
<td title="$!esc.html($_banner.downDate)">$!esc.html($_banner.downDate)</td>
<td class="text-center">
<span class="fa fa-pencil btn-edit" style="cursor: pointer;" title="编辑" data-id="$!{_banner.id}"></span>&nbsp;
<span class="fa fa-trash-o btn-delete" style="cursor: pointer;" title="删除" data-id="$!{_banner.id}"></span>
</td>
</tr>
#end
#else
<tr>
<td colspan="7" class="text-center">暂无数据</td>
</tr>
#end
</tbody>
</table>
</div>
#PAGINATIONAREA($page,"changePage")


<!--<script>
function bigImg(x)
{
x.style.height="400px";
x.style.width="400px";
}


function normalImg(x)
{
x.style.height="20px";
x.style.width="20px";
}
</script>-->