1.jsp页面,引入layui的css和js
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="../../include.jsp" %>
<!DOCTYPE html>
<%
String path = request.getContextPath();
%>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<%@ include file="../../newLink.jsp" %>
<link rel="stylesheet" href="<%=path%>/css/css/header.css">
</head>
<body>
<header>
<div class="layui-row">
<div class="layui-form layui-col-md11">
<div class="layui-row">
<div class="layui-col-md4">
<div class="layui-form-item">
<div class="layui-input-block" style="padding-right: 10px;margin-left: 25px;">
<input type="text" autocomplete="off" class="layui-input" placeholder="案件受理号" name="caseSn" id="caseSn">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<div class="layui-input-block" style="padding-right: 10px;margin-left: 25px;">
<input type="text" class="layui-input" placeholder="被鉴定人姓名" name="memberName" id="memberName">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<div class="layui-input-block" style="padding-right: 10px;margin-left: 25px;">
<input type="text" class="layui-input" placeholder="检材编号" name="sampleSn" id="sampleSn">
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md1">
<button class="layui-btn layui-btn-green layui-btn-radius" data-type="reload" id="queryBtn">查询</button>
</div>
</div>
</header>
<main>
<%--20190328添加检材批量处理--%>
<button class="layui-btn" data-type="getCheckData" id="batchHandle">批量处理</button>
<table class="layui-table" id="sampleHandleTable" lay-filter="sampleHandleTable"></table>
</main>
</body>
<div id="addRecordBox" class="popBox">
<div class="layui-row layui-form">
<div class="layui-col-md12">
<div class="layui-form-item">
<label class="layui-form-label layui-form-label-top">处理人<span style="color:red">*</span></label>
<div class="layui-input-block layui-input-top">
<input type="hidden" class="layui-input" name="handlePerson" id="handlePerson">
<select id="handlePersonId" lay-filter="peopleMsg">
<option value=""></option>
<c:forEach items="${personMaps}" var="list" varStatus="s">
<option value="${list.ID}">${list.LASTNAME}</option>
</c:forEach>
</select>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-form-item">
<label class="layui-form-label layui-form-label-top">处理时间<span style="color:red">*</span></label>
<div class="layui-input-block layui-input-top">
<input type="text" class="layui-input timeLay" name="handleAt" readonly="readonly">
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-form-item">
<label class="layui-form-label layui-form-label-top">处理方式<span style="color:red">*</span></label>
<div class="layui-input-block layui-input-top">
<input type="text" class="layui-input" name="handleMethod">
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-form-item">
<label class="layui-form-label layui-form-label-top">监督人<span style="color:red">*</span></label>
<div class="layui-input-block layui-input-top">
<input type="hidden" class="layui-input" name="supervisor" id="supervisorName">
<select id="supervisorId" lay-filter="peopleMsg">
<option value=""></option>
<c:forEach items="${personMaps}" var="list" varStatus="s">
<option value="${list.ID}">${list.LASTNAME}</option>
</c:forEach>
</select>
</div>
</div>
</div>
</div>
<div style="text-align: center">
<input type="hidden" name="index">
<input type="hidden" name="caseIdHidden" id="caseIdHidden">
<input type="hidden" name="sampleIdHidden" id="sampleIdHidden">
<input type="hidden" name="recordIdHidden" id="recordIdHidden">
<input type="hidden" name="sampleSn" id="sampleSnss">
<input type="hidden" name="caseId" id="caseBaseID">
<input type="hidden" name="sampleTypeName" id="sampleTypeNamess">
<input type="hidden" name="sampleName" id="sampleNamess">
<button class="layui-btn layui-btn-radius layui-btn-green" id="saveRecord">保存</button>
<button class="layui-btn layui-btn-radius layui-btn-green-border" id="cancelBtn">取消</button>
</div>
</div>
<jsp:include page="../../script.jsp"/>
<script>
var id_str;
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#sampleHandleTable'
,url:'/sample/sampleHandleList.html'
,cols: [[
{type:'checkbox'}
,{title:'序号',type:'numbers'}
,{field:'id', width:80, title: 'ID', sort: true,hide:true}
,{field:'caseId', width:80, title: 'caseId', sort: true,hide:true}
,{field:'caseSn', width:240, title: '案件受理号', sort: true}
,{field:'collectionTime', width:130, title: '采样时间', sort: true,templet :function (row){
return createTime(row.collectionTime);
}}
,{field:'samplingAddress', width:180, title: '采样地点'}
,{field:'samplePerson', width:100,title: '采样人'}
,{field:'receivePerson', width:100, title: '接收人'}
,{field:'receiveAt', width:130, title: '接收时间', sort: true,templet :function (row){
return createTime(row.receiveAt);
}}
,{field:'classify', width:80, title: '操作', toolbar: '#barDemo'}
]]
,page: true
,id:'handleTable'
});
//监听工具条
table.on('tool(sampleHandleTable)', function(obj){
var data = obj.data; //获得当前行数据
location.href="<%=path%>/sample/addSampleHandleRecord.html?caseBaseID="+data.caseId+"&recordId="+data.id+"&operate=edit";
});
//监听复选框事件
table.on('checkbox(sampleHandleTable)', function(obj){
id_str = '';
var checkStatus = table.checkStatus('handleTable');
var data = checkStatus.data;
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
id_str += data[i].caseId + ',';
}
}
});
var $ = layui.$, active = {
reload: function(){
var caseSn = $('#caseSn');
var memberName = $('#memberName');
var sampleSn = $('#sampleSn');
//执行重载
table.reload('handleTable', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
caseSn: caseSn.val(),
memberName:memberName.val(),
sampleSn:sampleSn.val()
}
});
},
getCheckData: function(){ //获取选中数据
layer.open({
type: 1,
title: '批量处理',
area: '460px',
offset: '100px',
content: $("#addRecordBox"),
end: function() {
$("#addRecordBox").find('input').val("")
}
});
}
};
$('#queryBtn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
$('#batchHandle').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
function createTime(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;
return str;
}
//弹出框取消按钮
$("#cancelBtn").click(function() {
layer.closeAll();
});
//保存处理信息
$("#saveRecord").click(function(){
var handlePersonName = $("#handlePersonId option:selected").text();
$("#handlePerson").val(handlePersonName);
if (typeof handlePersonName == "undefined" || handlePersonName == null || handlePersonName == "") {
layer.alert("处理人不能为空!");
return false;
}
var handleAt = $("input[name='handleAt']").val();
if(typeof handleAt == "undefined" || handleAt == null || handleAt == ""){
layer.alert("处理时间不能为空!");
return false;
}
var handleMethod = $("input[name='handleMethod']").val();
if(typeof handleMethod == "undefined" || handleMethod == null || handleMethod == ""){
layer.alert("处理方式不能为空!");
return false;
}
var supervisorName = $("#supervisorId option:selected").text();
$("#supervisorName").val(supervisorName);
if (typeof supervisorName == "undefined" || supervisorName == null || supervisorName == "") {
layer.alert("监督人不能为空!");
return false;
}
$.ajax({
url: "<%=path%>/sample/saveBatchSampleHandleUseRecord.html",
type: "post",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(params (id_str)),
dataType: "json",
success: function (data) {
layer.msg('处理成功');
layer.closeAll();
},
error: function (e) {
layer.msg('处理失败');
}
});
});
function params (id_str) {
var sampleUseRecord = {};
sampleUseRecord.id = $("input[name='id']").val();
sampleUseRecord.caseId = id_str;
sampleUseRecord.sampleId = $("input[name='sampleIdHidden']").val();
sampleUseRecord.handlePerson = $("input[name='handlePerson']").val();
sampleUseRecord.handleAt = $("input[name='handleAt']").val();
sampleUseRecord.handleMethod = $("input[name='handleMethod']").val();
sampleUseRecord.supervisor = $("input[name='supervisor']").val();
sampleUseRecord.sampleSn = $("input[name='sampleSn']").val();
sampleUseRecord.sampleTypeName = $("input[name='sampleTypeName']").val();
sampleUseRecord.sampleName = $("input[name='sampleName']").val();
return sampleUseRecord;
}
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" target="ifm" lay-event="edit">编辑</a>
</script>
</html>
2.java后台
/**
* @param request
* @param query 列表上方的查询条件对应的实体接收类
* @param pageInfo 分页对象
* @return
*/
@RequestMapping("/sampleHandleList.html")
@ResponseBody
public Map sampleHandleList(HttpServletRequest request, SampleReceiveRecord query, PageInfo pageInfo,Integer page,Integer limit) {
Map<String,Object> result = new HashMap<String,Object>();
int pageCount = 0;//查询结果记录条数
List<SampleReceiveRecord> sampleReceiveRecordLists = new ArrayList<SampleReceiveRecord>();//查询结果集
int returnCode = 0;//返回状态码
try{
pageInfo.setCurPage(page);//设置当前页
pageInfo.setEvePageRecordCnt(limit);//设置pageSize
}
}catch(Exception e){
returnCode = 500;
}
result.put("data",list);
result.put("count",pageCount);
result.put("code",returnCode);
return result;
}
3更多信息查看https://www.layui.com/demo/。