第一步编写HTML页面（普通列表）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<%include("/base/listBase.html"){}%>
</head>
<body>
<div style="height: 100%;" class="wrapper wrapper-content">
<#table id ="user_table" url="/manage/user/dateList.html">
<#tr field="ids" hidden="true" width="20" align="left" text="ID"></#tr>
<#tr field="user_name" width="50" align="left" text="用户名"></#tr>
<#tr field="nick_name" width="100" align="left" text="昵称"></#tr>
<#tr field="status" dict="user_status" query="true" width="100" align="left" text="状态"></#tr>
<#tr field="last_time" width="100" align="left" text="最后登录时间"></#tr>
<#tr field="opt" align="left" text="操作"></#tr>
<#opt buttonClz="btn-info" type="openwin" url="/manage/user/addPage?ids={ids}" iconClz="fa-pencil" text="编辑"></#opt>
<#opt buttonClz="btn-success" type="fun" funname="resetPass(ids)" iconClz="fa-refresh" text="重置密码"></#opt>
<#opt buttonClz="btn-primary" exp="status#ne#3" funname="updateStatus(ids)" type="fun" iconClz="fa-check" text="启用"></#opt>
<#opt buttonClz="btn-warning" exp="status#eq#3" funname="updateStatus(ids)" type="fun" iconClz="fa-ban" text="禁用"></#opt>
<#opt buttonClz="btn-danger" type="del" url="/manage/user/del?ids={ids}" iconClz="fa-trash" text="删除"></#opt>
</#table>
</div>
<div id="toolbar_user_table">
<button onclick="seePage('/manage/user/addPage.html','查看用户','user_table')" class="btn btn-info btn-sm" type="button"><i class="glyphicon glyphicon-eye-open"></i> 查看</button>
<button onclick="addPage('/manage/user/addPage.html','添加用户')" class="btn btn-success btn-sm" type="button"><i class="glyphicon glyphicon-plus"></i> 添加</button>
</div>
<script type="text/javascript">
//重置密码
function resetPass(ids){
createdialog("重置密码", "确定需要重置密码吗？", "/manage/user/resetPass?ids="+ids,"user_table");
}
//修改状态
function updateStatus(ids){
createdialog("更改用户状态", "确定需要修改吗？", "/manage/user/updateStatus?ids="+ids,"user_table");
}
</script>
</body>
</html>
第二步编写树形列表
<html>
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<%include("/base/listBase.html"){}%>
</head>
<body>
<div style="height: 100%;" class="wrapper wrapper-content">
<#table pagination="false" treeTable="true" id ="menu_table" url="/manage/menu/dateList.html">
<#tr field="ids" hidden="true" width="20" align="left" text="ID"></#tr>
<#tr field="name" width="100" align="left" text="菜单名称"></#tr>
<#tr field="icon" formatter="formatterIcon" width="50" align="left" text="菜单图标"></#tr>
<#tr field="level" width="100" align="left" text="菜单等级"></#tr>
<#tr field="orders" width="100" align="left" text="菜单排序"></#tr>
<#tr field="url" width="200" align="left" text="菜单路径"></#tr>
<#tr field="opt" align="left" text="操作"></#tr>
<#opt buttonClz="btn-info" type="openwin" url="/manage/menu/addPage?ids={ids}" iconClz="fa-pencil" text="编辑"></#opt>
<#opt buttonClz="btn-danger" type="del" url="/manage/menu/del?ids={ids}" iconClz="fa-trash" text="删除"></#opt>
</#table>
</div>
<div id="toolbar_menu_table">
<button onclick="addPage('/manage/menu/addPage.html','添加菜单')" class="btn btn-success btn-sm" type="button"><i class="glyphicon glyphicon-plus"></i> 添加</button>
</div>
<script type="text/javascript">
function formatterIcon(val,row,index){
if(val != null){
return "<i class=\"fa fa-"+val+"\"></i>"
}
}
</script>
</body>
</html>
效果图如下：
分页，工具栏，搜索，数据字典轻松搞定
