layui table数据列表加载查询和数据操作

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/。

layui table数据列表加载查询和数据操作

猜你喜欢