一、前端页面
重点:1、table.render初始化加载数据
2、reload查询按钮触发,数据重新载入
3、查询按钮绑定事件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layuiadmin/style/admin.css" media="all">
<title>App版本管理</title>
</head>
<body>
<div class="layui-fluid">
<div class="layui-card layui-form-item p-filter-search">
<form class="layui-form" action="">
<div class="search-term">
<label class="layui-form-label">版本</label>
<div class="layui-input-block">
<input type="text" id="version" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="search-term">
<div class="layui-inline">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="startDate" placeholder="yyyy-MM-dd">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">结束时间</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="endDate" placeholder="yyyy-MM-dd">
</div>
</div>
</div>
<div class="search-term">
<a class="layui-btn" data-type="reload">查询</a>
</div>
</form>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">表格列表</div>
<div class="layui-card-body layadmin-takerates">
<div class="add-btn">
<button class="layui-btn layui-btn-sm" data-type="add" id="addTable">新增 +</button>
</div>
<table class="layui-table" id="idTest" lay-filter="listTable"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit" data-method="setTop">编辑</a>
</script>
</div>
</div>
</div>
</div>
<script src="${pageContext.request.contextPath}/static/layuiadmin/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/static/js/common/jquery-2.0.3.min.js"></script>
<script>
layui.config({
base: '${pageContext.request.contextPath}/static/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'table','jquery'], function(){
var $ = layui.$
,form = layui.form
,table = layui.table;
//页面初始化加载数据
table.render({
elem: '#idTest'
,url: '${pageContext.request.contextPath}/apkVersion/datalist'
,cols: [[ //标题栏
{type:'checkbox', fixed: 'left'}
,{field: 'id', title: 'ID', width: 80, sort: true,fixed: true}
,{field: 'apkUrl', title: '连接', width: 350}
,{field: 'newFeature', title: '新增特征', minWidth: 80}
,{field: 'versionCode', title: '版本序号', minWidth: 60}
,{field: 'version', title: '版本', width: 80}
,{field: 'createUser', title: '操作人', width: 80}
,{field: 'os', title: '系统', width: 80, sort: true}
,{field: 'updateTime', title: '更新时间', width: 200,
templet :function (row){
return FormatTime(row.updateTime);
}
}
,{title: '操作', width:178, align:'center', toolbar: '#barDemo'}
]]
,id: 'testReload'
,page: true //是否显示分页
});
//监听表格复选框选择
table.on('checkbox(listTable)', function(obj){
console.log(obj)
});
//监听工具条
table.on('tool(listTable)', function(obj){
var data = obj.data;
if(obj.event === 'edit'){
var currentData = JSON.stringify(data);
var updRecord=layer.open({
type: 2
,id: (new Date()).valueOf()
,title: '编辑'
,content: "${pageContext.request.contextPath}/apkVersion/toAdd?id="+data.id+""
,area: ['800px', '600px']
,btn: ['确定', '取消']
,maxmin: true
,success: function(layero, index){
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
var paramId=body.find("input[name='id']");
paramId.val(111);
}
});
layer.full(updRecord);
}
});
var $ = layui.$, active = {
getCheckData: function(){ //获取选中数据
var checkStatus = table.checkStatus('idTest')
,data = checkStatus.data;
layer.alert(JSON.stringify(data));
}
,getCheckLength: function(){ //获取选中数目
var checkStatus = table.checkStatus('idTest')
,data = checkStatus.data;
layer.msg('选中了:'+ data.length + ' 个');
}
,isAll: function(){ //验证是否全选
var checkStatus = table.checkStatus('idTest');
layer.msg(checkStatus.isAll ? '全选': '未全选')
}
,add: function(){
var newRecord=layer.open({
type: 2
,id: (new Date()).valueOf()
,title: '编辑'
,content: "${pageContext.request.contextPath}/apkVersion/toAdd"
,area: ['800px', '600px']
,btn: ['确定', '取消']
,maxmin: true
,success: function(layero, index){
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
var paramId=body.find("input[name='id']");
paramId.val(111);
}
});
layer.full(newRecord);
}
,reload: function(){//查询按钮,重载数据
var version = $('#version').val();
var startDate = $('#startDate').val();
var endDate = $('#endDate').val();
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: { //往后台传递的参数
version: version,
startDate: startDate,
endDate: endDate
}
});
}
};
$('.layadmin-takerates .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//查询按钮绑定事件
$('.search-term .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
//日期控件
layui.use(['laydate'], function(){
var laydate = layui.laydate;
//常规用法
laydate.render({
elem: '#startDate'
});
//国际版
laydate.render({
elem: '#endDate'
,lang: 'en'
});
});
</script>
<script type="text/javascript">
//日期格式化
function FormatTime(v){
var date = new Date(v);
var y = date.getFullYear();
var m = date.getMonth()+1;
m = m<10?'0'+m:m;
var d = date.getDate();
d = d<10?("0"+d):d;
var h = date.getHours();
h = h<10?("0"+h):h;
var M = date.getMinutes();
M = M<10?("0"+M):M;
var str = y+"-"+m+"-"+d+" "+h+":"+M;
return str;
}
</script>
</body>
</html>
2、后台数据处理,往前端传递的数据格式为json,需要使用@ResponseBody;
必须携带code,否则数据加载错误;
必须携带count,否则分页异常;
controller代码如下:
@RequestMapping("/datalist")
@SystemControllerLog(sysKey=SysConsts.SYSAPPVERGETKEY,SysTypeName=SysConsts.SYSAPPVERMsg,description=SysConsts.SYSAPPVERGETMsg)
@ResponseBody
public Object datalist(HttpServletRequest request , @RequestParam Map<String, String> paramMap){
PageInfo<ApkVersionUpgrade> pageInfo = apkVersionService.list(request,paramMap);
Map<String,Object> map=new HashMap<String,Object>();
map.put("data", pageInfo.getList());
map.put("code", 0);
map.put("msg", "请求成功");
map.put("count", pageInfo.getTotal());
return map;
}
serviceImpl代码如下:
@Override
public PageInfo<ApkVersionUpgrade> list(HttpServletRequest request, Map<String, String> paramMap) {
Integer pno=Integer.parseInt(paramMap.get("page"));
Integer pageSize=Integer.parseInt(paramMap.get("limit"));
PageHelper.startPage(pno, pageSize);
List<ApkVersionUpgrade> list =apkVersionUpgradeMapper.list(paramMap);
PageInfo<ApkVersionUpgrade> pageInfo = new PageInfo<ApkVersionUpgrade>(list);
return pageInfo;
}
pageHelper是mybatis的分页插件,maven的pom.xml配置如下:
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
</dependency>
application.properties配置如下:
#分页插件
pagehelper.helperDialect=mysql
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql
pagehelper.page-size-zero=true
注:layui与pageHelper整合后,分页是异步刷新数据的