剑鸣秋朔

Appearance

章节导航

查看学生信息 ​

查看学生信息弹窗 ​

index.html ​

html
<button class="layui-btn layui-bg-blue layui-btn-xs" lay-event="view">
        <i class="layui-icon layui-icon-list"></i>查看
    </button>

lay-event="view" 为编辑按钮监听事件

index.js 弹窗 ​

js
function tool(table) {
    table.on('tool(layFilter)', function (obj) {
        let data = obj.data;

        // 查看
        if ('view' === obj.event) { // 查看
            layer.open({
                type: 2,
                title: '查看学生信息',
                content: path + '/view/' + data.id,
                area: ['60%', '80%'],
                fix: false,
                maxmin: false,
                shade: 0.3,
                shadeClose: false,
                btn: ['关闭'],
                success: function (layero, index) {
                    layer.iframeAuto(index);
                },
            });
        }
       
    })
}

StudentInfoController 添加跳转路径 ​

/***
     * 跳转到查看页面
     *
     * @author 王大宸
     * @date 2023/8/13 16:45
     * @param id id
     * @param modelMap modelMap
     * @return java.lang.String
     */
    @GetMapping(value = "/view/{id}")
    public String view(@PathVariable("id") String id, ModelMap modelMap) throws Exception {
        modelMap.put("studentInfo", studentInfoService.getStudentInfoById(id));
        return "student/view";
    }

前端 ​

html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title text="编辑学生信息"></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <link href="/static/layui/css/layui.css" rel="stylesheet" media="all"/>
    <script type="text/javascript" src="/static/jquery-3.6.4.min.js"></script>
    <script type="text/javascript" src="/static/layui/layui.js"></script>
    <script src="/static/student/edit.js" charset="utf-8"></script>

    <style>

        .required {
            color: red;
            margin-right: 5px;
        }

        .form-footer {
            width: 100%;
            margin-bottom: 0;
            bottom: 0;
            padding: 10px 60px 10px 14px;
            position: fixed;
            background: #FFF;
            border-top: #f3f3f3 1px solid;
            text-align: right;
            left: 0;
        }


        .layui-form-body {
            margin-right: 30px;
            margin-bottom: 70px;
            padding-top: 10px;
        }

        .button-sub {
            display: inline-block;
            white-space: nowrap;
            text-align: center;
            border-radius: 2px;
            cursor: pointer;
            background: #52cbbe;
            border: #17B3A3 1px solid;
            color: #FFFFFF;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            margin-right: 6px;
            padding: 0 15px;
        }

        .button-sub:hover {
            background-color: #5ac9bd;
        }

        .button-close {
            display: inline-block;
            white-space: nowrap;
            text-align: center;
            border-radius: 2px;
            cursor: pointer;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            padding: 0 15px;
            border: 1px solid #C9C9C9;
            background-color: #fff;
            color: #555;
            margin-right: 30px;
        }

        .button-close:hover {
            background-color: #e8f7f6;
            border-color: #b9e8e3;
            color: #17B3A3;
        }

    </style>

</head>
<body>

<form class="layui-form" id="addStudentInfoForm" th:object="${studentInfo}">
    <input type="text" id="id" name="id" th:value="*{id}" class="layui-input" style="display: none">
    <div class="layui-form-body">
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required">*</span>姓名
            </label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name"
                       th:field="*{name}" disabled="disabled"
                       autocomplete="off" lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required">*</span>所属学校
            </label>
            <div class="layui-input-block">
                <select id="schoolId" name="schoolId" disabled="disabled">
                    <option value="">请所属学校</option>
                    <option value="0" th:selected="${'0' eq studentInfo.schoolId}">湖北大学</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required">*</span>所属学院
            </label>
            <div class="layui-input-block">
                <select id="academyId" name="academyId" disabled="disabled">
                    <option value="">请所属学院</option>
                    <option value="1" th:selected="${'1' eq studentInfo.academyId}">计算机与信息工程学院</option>
                    <option value="2" th:selected="${'2' eq studentInfo.academyId}">数学与统计学学院</option>
                    <option value="3" th:selected="${'3' eq studentInfo.academyId}">材料科学与工程学院</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required">*</span>出生日期
            </label>
            <div class="layui-input-block">
                <input type="text" id="birthday" name="birthday" th:field="*{birthday}"
                       disabled="disabled" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required">*</span>学号
            </label>
            <div class="layui-input-block">
                <input type="text" id="stuNo" name="stuNo" th:field="*{stuNo}"
                       disabled="disabled" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required">*</span>性别
            </label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" disabled="disabled"
                       th:attr="checked=${'1' eq studentInfo.sex}" title="男">
                <input type="radio" name="sex" value="2" disabled="disabled"
                       th:attr="checked=${'2' == studentInfo.sex}" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                描述
            </label>
            <div class="layui-input-block">
              <textarea id="remarks" name="remarks" maxlength="200" th:field="*{remarks}"
                        disabled="disabled" autocomplete="off" class="layui-textarea"></textarea>
            </div>
        </div>

    </div>
</form>

</body>
</html>