xadmin 的部分模板片段，首页导航栏
<#macro navLeft>
<div class="left-nav">
<div id="side-nav">
<ul id="nav">
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="会员管理"></i>
<cite>会员管理</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('统计页面','welcome1.html')">
<i class="iconfont"></i>
<cite>统计页面</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('会员列表(静态表格)','member-list.html')">
<i class="iconfont"></i>
<cite>会员列表(静态表格)</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('会员列表(动态表格)','member-list1.html',true)">
<i class="iconfont"></i>
<cite>会员列表(动态表格)</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('会员删除','member-del.html')">
<i class="iconfont"></i>
<cite>会员删除</cite></a>
</li>
<li>
<a href="javascript:;">
<i class="iconfont"></i>
<cite>会员管理</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('会员删除','member-del.html')">
<i class="iconfont"></i>
<cite>会员删除</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('等级管理','member-list1.html')">
<i class="iconfont"></i>
<cite>等级管理</cite></a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="订单管理"></i>
<cite>订单管理</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('订单列表','order-list.html')">
<i class="iconfont"></i>
<cite>订单列表</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('订单列表1','order-list1.html')">
<i class="iconfont"></i>
<cite>订单列表1</cite></a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="分类管理"></i>
<cite>分类管理</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('多级分类','cate.html')">
<i class="iconfont"></i>
<cite>多级分类</cite></a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="城市联动"></i>
<cite>城市联动</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('三级地区联动','city.html')">
<i class="iconfont"></i>
<cite>三级地区联动</cite></a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="管理员管理"></i>
<cite>管理员管理</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('管理员列表','admin-list.html')">
<i class="iconfont"></i>
<cite>管理员列表</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('角色管理','admin-role.html')">
<i class="iconfont"></i>
<cite>角色管理</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('权限分类','admin-cate.html')">
<i class="iconfont"></i>
<cite>权限分类</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('权限管理','admin-rule.html')">
<i class="iconfont"></i>
<cite>权限管理</cite></a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="系统统计"></i>
<cite>系统统计</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('拆线图','echarts1.html')">
<i class="iconfont"></i>
<cite>拆线图</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('拆线图','echarts2.html')">
<i class="iconfont"></i>
<cite>拆线图</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('地图','echarts3.html')">
<i class="iconfont"></i>
<cite>地图</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('饼图','echarts4.html')">
<i class="iconfont"></i>
<cite>饼图</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('雷达图','echarts5.html')">
<i class="iconfont"></i>
<cite>雷达图</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('k线图','echarts6.html')">
<i class="iconfont"></i>
<cite>k线图</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('热力图','echarts7.html')">
<i class="iconfont"></i>
<cite>热力图</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('仪表图','echarts8.html')">
<i class="iconfont"></i>
<cite>仪表图</cite></a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="图标字体"></i>
<cite>图标字体</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('图标对应字体','unicode.html')">
<i class="iconfont"></i>
<cite>图标对应字体</cite></a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="其它页面"></i>
<cite>其它页面</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a href="login.html" target="_blank">
<i class="iconfont"></i>
<cite>登录页面</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('错误页面','error.html')">
<i class="iconfont"></i>
<cite>错误页面</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('示例页面','demo.html')">
<i class="iconfont"></i>
<cite>示例页面</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('更新日志','log.html')">
<i class="iconfont"></i>
<cite>更新日志</cite></a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="iconfont left-nav-li" lay-tips="第三方组件"></i>
<cite>layui第三方组件</cite>
<i class="iconfont nav_right"></i></a>
<ul class="sub-menu">
<li>
<a onclick="xadmin.add_tab('滑块验证','https://fly.layui.com/extend/sliderVerify/')" target="">
<i class="iconfont"></i>
<cite>滑块验证</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('富文本编辑器','https://fly.layui.com/extend/layedit/')">
<i class="iconfont"></i>
<cite>富文本编辑器</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('eleTree 树组件','https://fly.layui.com/extend/eleTree/')">
<i class="iconfont"></i>
<cite>eleTree 树组件</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('图片截取','https://fly.layui.com/extend/croppers/')">
<i class="iconfont"></i>
<cite>图片截取</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('formSelects 4.x 多选框','https://fly.layui.com/extend/formSelects/')">
<i class="iconfont"></i>
<cite>formSelects 4.x 多选框</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('Magnifier 放大镜','https://fly.layui.com/extend/Magnifier/')">
<i class="iconfont"></i>
<cite>Magnifier 放大镜</cite></a>
</li>
<li>
<a onclick="xadmin.add_tab('notice 通知控件','https://fly.layui.com/extend/notice/')">
<i class="iconfont"></i>
<cite>notice 通知控件</cite></a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</#macro>
<#macro header title>
<head>
<meta charset="UTF-8">
<title>后台登录-X-admin2.2</title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="xadmin/css/font.css">
<link rel="stylesheet" href="xadmin/css/xadmin.css">
<!-- <link rel="stylesheet" href="./css/theme5.css"> -->
<script src="xadmin/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="xadmin/js/xadmin.js"></script>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
// 是否开启刷新记忆tab功能
// var is_remember = false;
</script>
</head>
</#macro>
两种数据表格的封装
<#macro studentSearchForm>
<div class="layui-row">
<form class="layui-form layui-col-md12 x-so" >
<input class="layui-input" placeholder="请输入姓名 " name="studentName" id="studentName">
<input class="layui-input" placeholder="请输入学号" name="studentId" id="studentId">
<input class="layui-input" placeholder="请输入班级编号" name="classId" id="classId">
<input class="layui-input" placeholder="请输入宿舍编号" name="dormitoryNum" id="dormitoryNum">
<#-- <input class="layui-input" type="hidden" name="pageIndex" value="1">-->
<#-- <input class="layui-input" type="hidden" name="pageSize" value="3">-->
<button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon"></i></button>
</form>
</div>
</#macro>
<#macro table>
<table class="layui-hide" id="student" lay-filter="student"></table>
<script>
layui.use(['table','form'], function(){
var table = layui.table;
table.render({
elem: '#student'
,url:'/api/student'
,title:'学生列表'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
,cols: [[
{field:'studentId', width:80, title: 'ID', sort: true}
,{field:'studentName', width:80, title: '用户名'}
,{field:'dormitoryNum', width:80, title: '性别', sort: true}
,{field: 'classId',width: 80,title: "班级",sort: true}
]],
limit:5,
limits:[5,10,15],
page: true,
skin:'line',
totalRow: true,
parseData: function(ret){ //将原始数据解析成 table 组件所规定的数据
// let res = ret.data;
console.log(ret);
return {
"code": ret.code, //解析接口状态
"msg": ret.msg, //解析提示文本
"count": ret.count, //解析数据长度
"data": ret.data //解析数据列表
};
}
});
});
</script>
</#macro>
<#macro table2>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="img">
<img src="images/{{d.fileName}}"/>
</script>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('table', function(){
var table = layui.table;
//温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
//详见：https://www.layui.com/doc/modules/table.html#totalRow
table.render({
elem: '#test'
,url:'/api/student'
,toolbar: '#toolbarDemo'
,title: '用户数据表'
,totalRow: true
,cols: [
[
{type: 'checkbox', fixed: 'left'}
,{field:'studentId', title:'商品ID', width:150, fixed: 'left', sort: true, totalRowText: '合计'}
,{field:'studentName', title:'商品名称', width:150}
// ,{field:'description', title:'商品描述', width:150}
// ,{field:'price', title:'商品价格', width:150, sort: true, totalRow: true}
// ,{field:'stock', title:'商品库存', width:150, sort: true, totalRow: true}
// ,{field:'categorylevelone', title:'一级分类', width:150}
// ,{field:'categoryleveltwo', title:'二级分类', width:150}
// ,{field:'categorylevelthree', title:'三级分类', width:150}
// ,{field:'fileName', title:'商品图片',templet: '#img'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]
]
,page: true
});
//工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'getCheckData':
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
break;
case 'getCheckLength':
var data = checkStatus.data;
layer.msg('选中了：'+ data.length + ' 个');
break;
case 'isAll':
layer.msg(checkStatus.isAll ? '全选': '未全选')
break;
};
});
//监听工具条
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.alert('编辑行：<br>'+ JSON.stringify(data))
}
});
});
</script>
</#macro>
后台代码
@GetMapping("/student")
public Map<String, Object> queryPage(@RequestParam(defaultValue = "1") @Min(1) Integer page, @RequestParam(value = "limit",defaultValue = "5") @Min(1) @Max(30) Integer size) {
List<Student> res = studentService.selectByExampleForPage(new StudentExample(), page, size);
return ok(res,PageInfo.of(res).getTotal());
}
}
![任务卡_06-JavaWEB_MVC[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)