使用效果图
使用laytpl模板引擎进行动态渲染，并使用表格树控件
使用实例代码
1.jsp代码<!DOCTYPE html>2.logisticsAreaList.js
<html lang="zh-CN">
<head>
<title>地区管理</title>
<!-- 表格树控件 -->
<link href="${ctxStatic}/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css"/>
<script src="${ctxStatic}/treeTable/jquery.treeTable.min.js" type="text/javascript"></script>
<!-- layertpl -->
<script src="${ctxStatic}/laytpl-v1.1/laytpl/laytpl.js" type="text/javascript"></script>
<!-- 业务js -->
<script src="${ctx}/views/admin/logistics/logisticsAreaList.js" type="text/javascript"></script>
</head>
<body>
<section class="panel">
<div class="panel-body">
<!-- Table开始 -->
<table id="treeTable" class="table table-hover table-condensed table-bordered">
<thead>
<tr>
<th>地区名称</th>
<th>地区ID</th>
<th>所属大区</th>
<th>上级地区</th>
<th>操作管理</th>
</tr>
</thead>
<tbody id="treeTableList"></tbody>
</table>
<script type="text/template" id="treeTableTpl">
<tr id="{{d.row.id}}" pId="{{d.pid}}">
<td width="20%" style="text-align:left">{{d.row.name}}</td>
<td>{{d.row.id}}</td>
<td>{{d.dict.largeArea || ''}}</td>
<td>{{d.row.parentId}}</td>
<td>
<shiro:hasPermission name="sys:area:edit">
<a type="button" class="btn btn-info btn-sm" href="${ctxa}/sys/area/form.do?id={{d.row.id}}">
<i class="fa fa-edit"></i> 编辑
</a>
<a type="button" class="btn btn-info btn-sm" href="${ctxa}/sys/area/form.do?parent.id={{d.row.id}}">
<i class="fa fa-level-down"></i> 添加下级地区
</a>
</shiro:hasPermission>
<shiro:hasPermission name="sys:area:drop">
<button type="button" href="${ctxa}/sys/area/delete.do?id={{d.row.id}}" class="btn btn-danger btn-sm deleteSure">
<i class="fa fa-trash-o"></i> 删除
</button>
</shiro:hasPermission>
</td>
</tr>
</script>
<!-- table结束 -->
</div>
</section>
<script type="text/javascript">
var jsonData = ${fns:toJson(list)};//list数据
var largeArea=${fns:toJson(fns:getDictList('large_area'))};//字典list数据
</script>
</body>
</html>
//jsonData是从库中查出来的数据，可使用<%--${fns:toJson(list)}--%>工具来转换
$(document).ready(function() {
//列表中删除按钮的弹框
$("#treeTable").delegate(".deleteSure","click",function(){
var href=$(this).attr("href");
fdp.confirm('确定要删除么？',href);
});
});
$(document).ready(function() {
//表格树
var tpl = $("#treeTableTpl").html();//模板
var data = jsonData;//jsonData是从库中查出来的数据
var ids = [];
var rootIds = [];//一级分类的ID集合
for (var i=0; i<data.length; i++){
ids.push(data[i].id);
}
ids = ',' + ids.join(',') + ',';
for (var i=0; i<data.length; i++){
if (ids.indexOf(','+data[i].parentId+',') == -1){
if ((','+rootIds.join(',')+',').indexOf(','+data[i].parentId+',') == -1){
rootIds.push(data[i].parentId);
}
}
}
var htmlArr=new Array();//存储生成的html
for (var i=0; i<rootIds.length; i++){
addRow(htmlArr, tpl, data, rootIds[i], true);
}
$("#treeTableList").append(htmlArr.join());
$("#treeTable").treeTable({expandLevel : 5});//展开层级
});
function addRow(htmlArr, tpl, data, pid, root){
for (var i=0; i<data.length; i++){
var row = data[i];
var la=row.largeArea;
var ll=(!row?'':!row.parentId?'':row.parentId) == pid;
if ((!row?'':!row.parentId?'':row.parentId) == pid){
var dd={
dict: {largeArea:fdp.getDictLabel(largeArea,parseInt(row.largeArea))},
pid: (root?0:pid),
row: row,
}
laytpl(tpl).render(dd, function(html){
htmlArr.push(html);
});
addRow(htmlArr, tpl, data, row.id);
}
}
}