利用easyui实现增删改查（四）：修改数据

需求：

数据列表后面是有修改的按钮，点击之后，会弹出一个模态框，并且对应的数据是会回填到模态框，之后我们修改之后，点击模态框里面的修改按钮，那么就可以将修改的数据传到后台，这样就可以完成修改功能

前端的显示

        //格式化显示操作的按钮
        caozuo:function (value,row,index) {
   
            return '<a href="javascript:void(0)" class="xiu_gai">修改</a> <a href="javascript:void(0)" class="shan_chu">删除</a>';
        }

修改界面的模态框

<%--修改的界面--%>
<div id="dialogedit" align="center">
    <form id="editform" action="/edit" method="post">
        <table>
         <input type="hidden" name="id" id="id"/></td>
           <tr>
                <td>名字</td>
                <td><input type="text" name="name" id="name"/></td>
            </tr>
            <tr>
                <td>性别</td>
                <td><input type="text" name="gender" id="gender"/></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input type="text" name="age" id="age"/></td>
            </tr>
            <tr>
                <td>手机</td>
                <td><input type="text" name="phone" id="phone"/></td>
            </tr>
            <tr>
                <td>地址</td>
                <td><input type="text" name="address" id="address"/></td>
            </tr>
        </table>


    </form>

</div>

给这个模态框加上easyui的样式

  // 生效编辑用户的easyui的样式

    $('#dialogedit').dialog({
   
        width:300,
        title:"编辑客户信息",
        iconCls:"icon-man",
        buttons:"#datagridtooredit",
        closed:true   //定义这个弹框初始化的时候是关闭的


    })

写了上面的代码，模态框我们是看不见的，因为easyui样式里面我们已经关闭了，现在给列表里面的修改按钮添加事件，一点击这个修改按钮，就弹出模态框界面，并且数据回填

    $("#datagridpersion").datagrid({
   

        title:"用户信息",
        iconCls:"icon-man",
        height:500,
        width:1000,
        url:'/showPersion',
        pagination:true,
    // 引用按钮组
        toolbar: '#datagridtoorbar',
        rownumbers:true, //显示行号
        checkOnSelect:false, //为false的时候，只有复选框被选中，才是真正的选中
        striped:true, //黑白相间
        //数据加载完成之后，执行的代码
        onLoadSuccess:function () {
   
            $('.xiu_gai').linkbutton({
   
                iconCls:"icon-edit",
                onClick:function () {
   
                // 点击了这个编辑按钮，先显示编辑的页面
                    $('#dialogedit').dialog({
   
                        closed:false,
                        // 是对话框有灯罩的效果
                        modal:true
                    })

                    // console.log($(this).parent().parent().parent().children())
                // 显示完修改的页面，现在需要将值回填到表单中，那么就需要获得当前行的值
                // 获得当前行的数据的id
                    var vid = $(this).parent().parent().parent().children().eq(0).find("input").val();
                    // console.log(vid)
                // ajax请求获取当前的数据
                // 填充到当前的编辑页
                    var ps={
   'id':'1001','name':'六级','age':18,'gender':1,'phone':1836396369,'address':"哈哈哈哈"};
                    $('#editform').form('load','/getbyid?id='+vid);


                }
            });
            $('.shan_chu').linkbutton({
   
                iconCls:"icon-cancel"
            });
        }
    });

我们修改完成之后，点击模态框里面的修改，那么会触发以下方法

  编辑的按钮组的样式
    $('#datagridtooredit>a:contains(修改)').linkbutton({
   
        iconCls:"icon-edit",
    // 点击这个修改之后，将修改的数据往后台传
        onClick:function () {
   
        // 提交表单数据
            $('#editform').form('submit',{
   
                success:function (data) {
   
                    //给你一个提示的信息
                    var parse = JSON.parse(data);
                    $.messager.show({
   
                        title:"提示",
                        msg:parse.msg
                    });
                    //关闭修改的页面
                    $('#dialogedit').dialog({
   
                        closed:true

                    });
                    // 2 在表单提交成功之后，datagrid重新的加载
                    $("#datagridpersion").datagrid("reload")


                }


            });

        }
    });

前端已经完成，开始后端

    // 修改用户
    @ResponseBody
    @RequestMapping("/edit")
    public  Object  edit(person p){
   
        System.out.println(p.toString());
        int i1 = persionService.updateById(p);
        System.out.println(p);

        Map<String, String> map = new HashMap<>();
        map.put("code","200");
        map.put("msg","编辑成功");
        return map;

    }

    <update id="update">
            update persion
            <trim prefix="set" suffixOverrides=",">
                <if test="name != null">
                    name =#{
   name},
                </if>

                <if test="gender != null">
                    gender =#{
   gender},
                </if>

                <if test="age != null">
                    age =#{
   age},
                </if>

                <if test="phone != null">
                    phone =#{
   phone},
                </if>

                <if test="address != null">
                    address =#{
   address},
                </if>
            </trim>
            where id=#{
   id}
    </update>