编辑学生信息

点击弹出编辑学生框

index.html

html

<button class="layui-btn layui-bg-purple layui-btn-xs" lay-event="update">
    <i class="layui-icon layui-icon-edit"></i>编辑
</button>

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

index.js 弹窗

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

        // 更新
        if ('update' === obj.event) {
            layer.open({
                type: 2,
                title: '编辑学生信息',
                content: path + '/edit/' + data.id,
                area: ['60%', '80%'],
                fix: false,
                maxmin: false,
                shade: 0.3,
                shadeClose: false,
                success: function (layero, index) {
                    layer.iframeAuto(index);
                },
            });
        }
       
    })
}

StudentInfoController 添加跳转路径

/***
     * 跳转到新增页面
     *
     * @author 王大宸
     * @date 2023/8/12 22:20
     * @return java.lang.String
     */
    @GetMapping("/edit/{id}")
    public String edit(@PathVariable("id") String id, ModelMap modelMap) throws Exception {
        modelMap.put("studentInfo", studentInfoService.getStudentInfoById(id));
        return "student/edit";
    }

编写根据ID查询方法

IStudentInfoService

StudentInfoVO getStudentInfoById(String id) throws Exception;

StudentInfoServiceImpl

@Override
    public StudentInfoVO getStudentInfoById(String id) throws Exception {
        return studentInfoMapper.getStudentInfoById(id);
    }

IStudentInfoMapper

StudentInfoVO getStudentInfoById(String id);

StudentInfoMapper.xml

<select id="getStudentInfoById" parameterType="java.lang.String" resultMap="studentInfoMap">
        <include refid="selectStudentInfoVO"/>
        WHERE id = #{id}
    </select>

前端

新增页面

在 templates/student 目录下新建 edit.html

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}"
                       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" lay-filter="aihao">
                    <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">
                    <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}"
                       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">
                <input type="text" id="stuNo" name="stuNo" th:field="*{stuNo}"
                       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">
                <input type="radio" name="sex" value="1"
                       th:attr="checked=${'1' eq studentInfo.sex}" title="男">
                <input type="radio" name="sex" value="2"
                       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="*{stuNo}"
                        autocomplete="off" class="layui-textarea"></textarea>
            </div>
        </div>

    </div>
    <div class="form-footer">
        <button type="button" class="button-sub" lay-submit lay-filter="editStudentInfo">保存</button>
        <button type="button" class="button-close" id="buttonClose">关闭</button>
    </div>
</form>

</body>
</html>

edit.js

在 static/student 目录下新建 edit.js

layui.use(['form', 'laydate'], function () {
    let form = layui.form;
    let laydate = layui.laydate;
    form.render();

    /* 出生日期, 日期选择组件 */
    laydate.render({
        elem: '#birthday'
    });


    /* 提交 */
    form.on('submit(editStudentInfo)', function (data) {
        $.ajax('/student/info/' + data.field.id, {
            type: 'PUT',
            data: JSON.stringify(data.field),
            contentType: 'application/json',
            datatype: 'json',
            success: function (res) {
                if (200 === res.status) {
                    // 刷新父页面表格
                    parent.reloadTableData();

                    /* 弹窗提示操作成功 */
                    layer.alert(res.msg, {title: "系统提示", icon: 1}, function () {
                        /* 关闭当前弹窗 */
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });

                } else {
                    layer.alert(res.msg, {
                        icon: 2,
                        title: "系统提示",
                        btn: ['确认'], btnclass: ['btn btn-primary'],
                    });
                }
            }
        })

        // 防止 form 跳转
        return false;
    });


    /* 关闭弹窗 */
    $("#buttonClose").click(function () {
        parent.layer.close(parent.layer.getFrameIndex(window.name));
    });

});

后端

StudentInfoController

@PutMapping("/{id}")
    @ResponseBody
    public ServerResponse<StudentInfoVO> updateStudentInfo(@RequestBody StudentInfoDTO studentInfoDTO) throws Exception {
        return ServerResponse.okData(studentInfoService.updateStudentInfo(studentInfoDTO));
    }

IStudentInfoService

StudentInfoVO updateStudentInfo(StudentInfoDTO studentInfoDTO) throws Exception;

StudentInfoServiceImpl

@Override
    @Transactional(rollbackFor = Exception.class)
    public StudentInfoVO updateStudentInfo(StudentInfoDTO studentInfoDTO) throws Exception {
        StudentInfo studentInfo = StudentInfoConvert.toJavaObject(studentInfoDTO);

        studentInfo.setUpdateTime(LocalDateTime.now());
        studentInfo.setUpdateUser("王大宸");
        studentInfo.setUpdateUserId("1");
        studentInfoMapper.updateStudentInfo(studentInfo);

        return StudentInfoConvert.toJavaObjectVo(studentInfo);
    }

IStudentInfoMapper

void updateStudentInfo(StudentInfo studentInfo);

StudentInfoMapper.xml

xml

<update id="updateStudentInfo" parameterType="com.github.itdachen.entity.StudentInfo">
    UPDATE fly_student_info
    <trim prefix="SET" suffixOverrides=",">
        <if test="null != name  and '' !=  name ">name = #{name},
        </if>
        <if test="null != schoolId  and '' !=  schoolId ">school_id = #{schoolId},
        </if>
        <if test="null != academyId  and '' !=  academyId ">academy_id = #{academyId},
        </if>
        <if test="null != birthday  and '' !=  birthday ">birthday = #{birthday},
        </if>
        <if test="null != stuNo  and '' !=  stuNo ">stu_no = #{stuNo},
        </if>
        <if test="null != sex  and '' !=  sex ">sex = #{sex},
        </if>
        <if test="null != remarks  and '' !=  remarks ">remarks = #{remarks},
        </if>
        <if test="null != createTime ">create_time = #{createTime},
        </if>
        <if test="null != createUserId  and '' !=  createUserId ">create_user_id = #{createUserId},
        </if>
        <if test="null != createUser  and '' !=  createUser ">create_user = #{createUser},
        </if>
        <if test="null != updateTime ">update_time = #{updateTime},
        </if>
        <if test="null != updateUserId  and '' !=  updateUserId ">update_user_id = #{updateUserId},
        </if>
        <if test="null != updateUser  and '' !=  updateUser ">update_user = #{updateUser},
        </if>
    </trim>
    WHERE id = #{id}
</update>

编辑学生信息 ​

点击弹出编辑学生框 ​

index.html ​

index.js 弹窗 ​

StudentInfoController 添加跳转路径 ​

编写根据ID查询方法 ​

IStudentInfoService ​

StudentInfoServiceImpl ​

IStudentInfoMapper ​

StudentInfoMapper.xml ​

前端 ​

新增页面 ​

edit.js ​

后端 ​

StudentInfoController ​

IStudentInfoService ​

StudentInfoServiceImpl ​

IStudentInfoMapper ​

StudentInfoMapper.xml ​

编辑学生信息

点击弹出编辑学生框

index.html

index.js 弹窗

StudentInfoController 添加跳转路径

编写根据ID查询方法

IStudentInfoService

StudentInfoServiceImpl

IStudentInfoMapper

StudentInfoMapper.xml

前端

新增页面

edit.js

后端

StudentInfoController

IStudentInfoService

StudentInfoServiceImpl

IStudentInfoMapper

StudentInfoMapper.xml