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

一写代码就开心

发布于 2020-11-19 15:24:30

6350

发布于 2020-11-19 15:24:30

文章被收录于专栏：java和python

点击列表上面的添加，弹出一个模态框，这个里面就可以添加数据了

先写出一个模态框，并且要隐藏，只有点击了添加按钮之后才可以弹出来，具体实现如下：

先写一个模态框，并且是隐藏的

<%--添加的界面--%>

<%--添加按钮组--%>
<div id="datagridtooradd">
    <a href="javascript:void(0)" >添加</a>
    <a href="javascript:void(0)" >清空</a>
</div>
<di

v id="dialogadd" align="center">
    <form id="addform" action="/add" method="post">
    <table>
        <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的样式

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


    })

写了以上的代码，那么就有模态框了，只是我们看不见，因为 closed:true 关闭了

给添加按钮加一个事件，让模态框出来

//生效列表按钮组
    $('#datagridtoorbar>a:contains(添加)').linkbutton({
        iconCls:"icon-add",
        onClick:function () {
        //    1  显示框   修改dialog的closed的属性
            $('#dialogadd').dialog({
                closed:false,
            //    是对话框有灯罩的效果
                modal:true
            })


        }
    });

一点击了之后，走对应的事件，那么模态框就出来了

我们填完数据之后，一点击模态框里面的添加按钮，应该向后台传数据，现在就需要在这个添加按钮上面加事件了，具体代码如下：

//    生成添加按钮组的样式
    $('#datagridtooradd>a:contains(添加)').linkbutton({
        iconCls:"icon-ok",
        onClick:function () {
        //    1  将表单的数据进行提交
            $('#addform').form('submit',{
                success:function (data) {
                    console.log(data);
                    var parse = JSON.parse(data);
                    $.messager.show({
                        title:"提示",
                        msg:parse.msg
                    });
                    $('#dialogadd').dialog({
                        closed:true

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

                }

            })



        }

    });

以上前端就完成了，添加按钮也有事件了，form表单上的action的值就是传的url路径现在开始写后端

//    添加用户
    @ResponseBody
    @RequestMapping("/add")
    public  Object  add(person p){

        System.out.println(p);
        int i = persionService.addPersion(p);
        Map<String, String> map = new HashMap<>();
        map.put("code","200");
        map.put("msg","添加成功");
        return map;

    }

   <insert id="addPersion">
        insert into persion(name,age,gender,phone,address) values (#{name},#{age},#{gender},#{phone},#{address})
    </insert>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/09/06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

action