Javaweb完整项目+Layui+Mybatis+增删改查条件模糊查询（源码）Part6之更新数据以及数据回显

朝饮暮酒

已于 2023-11-24 09:17:46 修改

阅读量126

点赞数

分类专栏： JavaWeb之Layui后台实现文章标签： layui mybatis javascript

于 2023-11-24 09:15:51 首次发布

本文链接：https://blog.csdn.net/weixin_44857328/article/details/134590330

版权

JavaWeb之Layui后台实现专栏收录该内容

7 篇文章 1 订阅

订阅专栏

首先，我们为什么要最后才写更新呢？因为更新的话涉及到数据回显，如果我们使用的是JavaSE的swing窗体或者使用jsp页面，数据回显是非常简单的，但是layui在弹出模板html后对表单重新渲染（可以所有表单都进行渲染，也可以渲染部分组件），所以数据回显我们需要特别注意。
效果展示:

在这里插入图片描述

以下为正文部分：

1.更新页面updateCustomer.html

这里有一个关键点需要注意，我们数据回显是需要获取到组件的对象的，为了方便获取到单选框的，这里选择为单选框的标签添加类。

比如：

    <div class="layui-form-item">
        <label class="layui-form-label">客户性别</label>
        <div class="layui-input-block">
            <input type="radio" class="radio1" name="gender" value="男" title="男" />
            <input type="radio" class="radio2" name="gender" value="女" title="女" />
        </div>
    </div>

完整页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"
          media="all">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="layui/layui.js"></script>
    <title>更新客户信息</title>

</head>
<body>

<form id="customer" class="layui-form layui-form-pane">
    <input type="hidden" name="uuid"/>
    <div class="layui-form-item">
        <label class="layui-form-label">客户账户</label>
        <div class="layui-input-block">
            <input type="text" id="username" name="username" autocomplete="off" placeholder="请输入客户账户"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">客户密码</label>
        <div class="layui-input-block">
            <input type="text" id="password" name="password" autocomplete="off" placeholder="请输入客户密码"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">客户昵称</label>
        <div class="layui-input-block">
            <input type="text" id="nickname" name="nickname" lay-verify="required" placeholder="请输入客户昵称"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">客户性别</label>
        <div class="layui-input-block">
            <input type="radio" class="radio1" name="gender" value="男" title="男" />
            <input type="radio" class="radio2" name="gender" value="女" title="女" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">客户地址</label>
        <div class="layui-input-block">
            <input type="text" name="addr" id="addr" placeholder="请输入客户地址" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="text-align:center;">
        <button type="button" lay-submit="" class="layui-btn layui-btn-normal" lay-filter="customer">保存</button>
        <button type="reset" id="btn_reset" class="layui-btn">重置</button>
    </div>
</form>


</body>
</html>

2.主页面的页面和事件监听

页面内容：
我们是通过之前写的操作的后面的内容实现的，

<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-sm" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除 </a>
</script>

这里我们绑定的事件名为 edit
在layui.use中写的js代码来打开iframe层的内容为：

   //修改触发的事件
        table.on('tool(customer)', function (obj) {
            //先获取当前的数据 json类型的数据 当前行的数据
            var data = obj.data;
            //如果这个触发的事件是del
            if (obj.event == 'edit') {
                //打开新窗口 并且为对应的层去做操作  index代表页面的层级
                var index = layer.open({
                    type: 2,//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    title: "更新客户信息",
                    maxmin: true,
                    area: ['600px', '450px'],
                    shadeClose: false, //点击遮罩关闭
                    content: 'updateCustomer.html',
                    success: function (layero, index) { //数据回显
                        //1.先获取对应的子窗口 类型'body'   updatebody
                        var updatebody = layer.getChildFrame('body', index);
                        //2.找到对应的元素并且为这个元素赋值
                        updatebody.find("input[name=uuid]").val(data.uuid);
                        updatebody.find("input[name=username]").val(data.username);
                        updatebody.find("input[name=password]").val(data.password);
                        updatebody.find("input[name=nickname]").val(data.nickname);
                        updatebody.find("input[name=addr]").val(data.addr);
                        //我们选取在iframe层进行延迟渲染
                        if (data.gender == '男') {
                            updatebody.find(".radio1").attr("checked", "checked");
                        } else {
                            updatebody.find(".radio2").attr("checked", "checked");
                       
                        //3重新设置大小时  弹出全屏
                        $(window).on("resize", function () {
                            layer.full(index);
                        });
                        return false;
                    }
                });
            }
        });

3.iframe层页面的js代码

我们采取一个定时器来解决这个数据不显示的问题

<script>

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

        setTimeout(function () {
            form.render();//用于渲染表格中的单选框
        },500);


        //在表格上写事件监听
        form.on('submit(customer)', function (data) {
            $.ajax({
                url: '/day01/customer/updateOne',
                data: data.field,
                type: 'post',
                dataType: 'JSON',
                success: function (data) {//data就是页面返回过来的数据
                    if (data.code > 0) {
                        console.log("更新数据成功" + data.message);
                        layer.alert('更新成功', {icon: 1}, function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index);
                            parent.reload();
                        });
                    } else {
                        layer.alert('更新失败', {icon: 5});
                    }
                }
            })
            return false;
        });

        /*点击重置按钮触发的事件监听*/
        $("#btn_reset").click(function () {
            $("#username").val(""),
                $("#nickname").val(""),
                $("#addr").val("");
        });
    });


</script>

这里的重点在于customer.html页面触发事件打开子页面的js内容才是我们数据回显也就是把当行数据设置到子页面上的操作。

4.servlet

 //更新一条数据
    public void updateOne(HttpServletRequest request, HttpServletResponse response) {
        try {
            //请求对象直接获取所有的参数名和值
            Map<String, String[]> map = request.getParameterMap();
            //使用BeanUtils直接进行对象的映射
            Customer customer=new Customer();
            BeanUtils.populate(customer,map);
            //获取sqlSession
            SqlSession sqlSession = GetSqlSession.getSqlSession();
            //获取代理对象
            CustomerMapper mapper =sqlSession.getMapper(CustomerMapper.class);
            //执行插入
            int i= mapper.update(customer);
            //sqlSession事务提交
            sqlSession.commit();
            if (i >0) {
                System.out.println("更新数据成功");
                String success = ResultData.success();
                response.getWriter().write(success);
            }else{
                System.out.println("更新数据失败");
                String error = ResultData.error();
                response.getWriter().write(error);
            }
        } catch (IOException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
    }

5.mapper

此处我们选择直接使用注解开发

 //更新数的注解生成
    @Update(" update  customer  set username = #{username}, password = #{password}, nickname = #{nickname}, gender = #{gender}, addr = #{addr}where uuid = #{uuid} ")
    int update(Customer customer);

6.完整的子页面代码

重点的回显在父页面customer.html触发事件后中的js中处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"
          media="all">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="layui/layui.js"></script>
    <title>更新客户信息</title>

</head>
<script>

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

        setTimeout(function () {
            form.render();//用于渲染表格中的单选框
        },500);


        //在表格上写事件监听
        form.on('submit(customer)', function (data) {
            $.ajax({
                url: '/day01/customer/updateOne',
                data: data.field,
                type: 'post',
                dataType: 'JSON',
                success: function (data) {//data就是页面返回过来的数据
                    if (data.code > 0) {
                        console.log("更新数据成功" + data.message);
                        layer.alert('更新成功', {icon: 1}, function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index);
                            parent.reload();
                        });
                    } else {
                        layer.alert('更新失败', {icon: 5});
                    }
                }
            })
            return false;
        });

        /*点击重置按钮触发的事件监听*/
        $("#btn_reset").click(function () {
            $("#username").val(""),
                $("#nickname").val(""),
                $("#addr").val("");
        });
    });


</script>
<body>

<form id="customer" class="layui-form layui-form-pane">
    <input type="hidden" name="uuid"/>
    <div class="layui-form-item">
        <label class="layui-form-label">客户账户</label>
        <div class="layui-input-block">
            <input type="text" id="username" name="username" autocomplete="off" placeholder="请输入客户账户"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">客户密码</label>
        <div class="layui-input-block">
            <input type="text" id="password" name="password" autocomplete="off" placeholder="请输入客户密码"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">客户昵称</label>
        <div class="layui-input-block">
            <input type="text" id="nickname" name="nickname" lay-verify="required" placeholder="请输入客户昵称"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">客户性别</label>
        <div class="layui-input-block">
            <input type="radio" class="radio1" name="gender" value="男" title="男" />
            <input type="radio" class="radio2" name="gender" value="女" title="女" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">客户地址</label>
        <div class="layui-input-block">
            <input type="text" name="addr" id="addr" placeholder="请输入客户地址" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" style="text-align:center;">
        <button type="button" lay-submit="" class="layui-btn layui-btn-normal" lay-filter="customer">保存</button>
        <button type="reset" id="btn_reset" class="layui-btn">重置</button>
    </div>
</form>


</body>
</html>

到此，增删改查，条件查询就已经全部实现了，最后一篇文章附上全部的代码和内容。

朝饮暮酒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Javaweb完整项目+Layui+Mybatis+增删改查条件模糊查询（源码）Part6之更新数据以及数据回显

Javaweb完整项目+Layui+Mybatis+增删改查条件模糊查询（源码）Part6之更新数据以及数据回显 layui更新的数据回显
复制链接

扫一扫