利用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的样式

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


    })

    $("#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>