layer‐list‐3 - niczhu/seckill GitHub Wiki

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html>
<head>
    <title>创业就业-政策层级表</title>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
    <script src="https://cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <form class="layui-form" action="" lay-filter="searchForm">
                <div class="layui-inline">
                    <label class="layui-form-label">层级编码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="code" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">层级名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-inline">
                        <input type="text" name="id" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">修改时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="modifiedTime" autocomplete="off" class="layui-input" id="modifiedTimeInput">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status" lay-verify="required">
                            <option value="">请选择</option>
                            <option value="ON">生效</option>
                            <option value="OFF">失效</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="searchBtn">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md12">
            <table class="layui-table" id="layerTable" lay-filter="layerTable"></table>
        </div>
    </div>
</div>

<script>
    layui.use(['table', 'form', 'laydate'], function(){
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;

        // 渲染表格
        var tableInstance = table.render({
            elem: '#layerTable',
            url: '/your/api/endpoint', // 替换为实际的后端接口地址
            method: 'post',
            where: {}, // 可以设置初始的搜索条件
            page: true,
            limits: [10, 20, 50, 100],
            limit: 10,
            cols: [[
                {field: 'code', title: '层级编码'},
                {field: 'name', title: '层级名称'},
                {field: 'desc', title: '描述'},
                {field: 'status', title: '状态', templet: '#statusTpl'},
                {field: 'modifiedTime', title: '最后修改', templet: '#timeTpl'},
                {title: '操作', toolbar: '#opBar'}
            ]]
        });

        // 监听搜索表单提交
        form.on('submit(searchBtn)', function(data){
            var formData = data.field;
            tableInstance.reload({
                where: formData,
                page: {curr: 1}
            });
            return false;
        });

        // 自定义模板
        var statusTpl = function(d){
            if(d.status === 'ON'){
                return '<span style="color: green;">生效</span>';
            } else if(d.status === 'OFF'){
                return '<span style="color: red;">失效</span>';
            } else {
                return '';
            }
        }

        var timeTpl = function(d){
            return layui.util.toDateString(d, 'yyyy-MM-dd HH:mm:ss');
        }

        // 渲染模板
        layui.util.fixbar(); // 修复 layui 的浮动工具栏位置
        layui.laytpl.statusTpl = statusTpl;
        layui.laytpl.timeTpl = timeTpl;

        // 初始化日期选择器
        laydate.render({
            elem: '#modifiedTimeInput',
            type: 'datetime'
        });

        // 监听表格工具栏操作
        table.on('tool(layerTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                // 跳转到编辑页面，并传递参数
                window.location.href = '/your/edit/page?id=' + data.id + '&code=' + data.code;
            }
            else if(obj.event === 'delete'){
                // 弹出删除确认框，并传递参数
                layer.confirm('确定删除该记录？', function(index){
                    // 发送删除请求
                    $.post('/your/delete/endpoint', {id: data.id, code: data.code}, function(res){
                        if(res.code === 0){
                            layer.msg('删除成功');
                            tableInstance.reload();
                        } else {
                            layer.msg('删除失败');
                        }
                    });
                });
            }
        });
    });
</script>
</body>
</html>
⚠️ **GitHub.com Fallback** ⚠️