破损验单查询系统 - 邮件信息查询，导出，打印 - 常规

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>破损验单查询</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.8.15/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-col-md4">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-date"></i>
                </div>
                <input type="text" name="A" placeholder="开始时间" class="layui-input demo-table-search-date">
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-date"></i>
                </div>
                <input type="text" name="B" placeholder="结束时间" class="layui-input demo-table-search-date">
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-input-wrap">
                <input type="text" name="C" placeholder="员工姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-btn-container layui-col-xs12">
            <button class="layui-btn" lay-submit lay-filter="demo-table-search">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">清空</button>
            <button class="layui-btn layui-btn-normal" id="exportBtn">导出</button>
            <button class="layui-btn layui-btn-normal" id="printBtn">打印</button>
        </div>
    </form>
    <table class="layui-hide" id="ID-table-demo-search"></table>
<pre><code>&lt;!-- 请勿在项目正式环境中引用该 layui.js 地址 --&gt;
&lt;script src=&quot;//unpkg.com/layui@2.8.15/dist/layui.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    layui.use(function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var currentId = 1; // 记录当前行的ID值

        // 创建表格实例
        table.render({
            elem: '#ID-table-demo-search',
            url: '/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
            response: {
                statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
            },
            // 将原始数据解析成 table 组件所规定的数据格式
            parseData: function (res) {
                return {
                    &quot;code&quot;: res.status, //解析接口状态
                    &quot;msg&quot;: res.message, //解析提示文本
                    &quot;count&quot;: res.total, //解析数据长度
                    &quot;data&quot;: res.rows.item //解析数据列表
                };
            },
            cols: [[ 
                { type: 'radio', title: '😊', fixed: true }, // 单选框
                {
                    field: '', title: 'ID', width: 120, fixed: 'left', sort: true, totalRowText: '合计',
                    templet: function (d) {
                        // 为每一行数据生成自增的 ID 值
                        return currentId++;
                    }
                },
                { field: 'institution', title: '机构号', width: 150, fixed: 'left' },
                { field: 'describe', title: '邮件描述', width: 150 },
                {
                    field: 'images', title: '图片', width: 150, templet: function (d) {
                        // 根据三个网址实现图片轮播
                        var images = d.images.split(',');
                        var html = '';
                        for (var i = 0; i &lt; images.length; i++) {
                            html += '&lt;img src='' + images[i] + '' style='width:100px;height:100px'&gt;';
                        }
                        return html;
                    }
                },
                { field: 'username', title: '员工姓名', width: 120 },
                { field: 'state', title: '状态（后台编辑）', width: 100, edit: 'text' },
                { field: 'date', title: '上传时间', width: 120 },
                {
                    fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150
                }
            ]],
            page: true,
            height: 310
        });

        // 日期
        laydate.render({
            elem: '.demo-table-search-date'
        });

        // 搜索提交
        form.on('submit(demo-table-search)', function (data) {
            var field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('ID-table-demo-search', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            layer.msg('搜索成功&lt;br&gt;此处为静态模拟数据，实际使用时换成真实接口即可');
            return false; // 阻止默认 form 跳转
        });

        // 监听工具条
        table.on('tool(ID-table-demo-search)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                // 编辑操作
                layer.alert('编辑数据：' + JSON.stringify(data));
            } else if (obj.event === 'delete') {
                // 删除操作
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });

        // 导出按钮点击事件
        document.getElementById('exportBtn').onclick = function () {
            var checkStatus = table.checkStatus('ID-table-demo-search');
            var data = checkStatus.data;
            if (data.length &gt; 0) {
                // 根据选中的数据进行导出操作
                layer.alert('导出数据：' + JSON.stringify(data));
            } else {
                layer.msg('请先选择要导出的数据');
            }
        };

        // 打印按钮点击事件
        document.getElementById('printBtn').onclick = function () {
            var checkStatus = table.checkStatus('ID-table-demo-search');
            var data = checkStatus.data;
            if (data.length &gt; 0) {
                // 根据选中的数据进行打印操作
                layer.alert('打印数据：' + JSON.stringify(data));
            } else {
                layer.msg('请先选择要打印的数据');
            }
        };

    });
&lt;/script&gt;
</code></pre>
</body>
</html>