EasyUI(三)表单控件的添加与修改

来源：互联网发布：宁波百度推广公司php 编辑：程序博客网时间：2024/06/07 10:00

添加按钮

点击添加出现一个对话框，对话框上是一个表单。

添加对话窗体

在页面的表格下添加一个面书写一个div,其中是一个对话框。为了完成自己需要的一些效果，可以为该对话框添加有一些相关属性，如果在本控件中不能找到，可以去其父进程找。为了在打开页面时不显示该对话框、不包含关闭按钮、包含折叠按钮、弹出后背后不能编辑。需要配置以下几个属性，这些属性都是window中的。
closable boolean 定义是否显示关闭按钮。
collapsible boolean 定义是否显示折叠按钮。
closed boolean 定义是否在初始化组件时关闭（隐藏）窗口
modal boolean 定义窗口是否带有遮罩效果。
属性也可以自己配，不写在自己定义的装多个属性的data-options里。

<div id="addDialog" class="easyui-dialog"        style="width: 600px; height: 600px" title="添加用户信息"        data-options="closable:false,collapsible:true,modal:true,closed:true"></div>

当点击添加按钮时弹出该对话框，为添加按钮设置一个点击事件，点击将对话框的closed属性值改为false。
为对话框中添加几个自己定义的按钮，主要是配置对话框的buttons属性，属性配置方法如下：

buttons array,selector 对话窗口底部的按钮，每个按钮的属性都跟链接按钮一样。1) an array, each button options is same as linkbutton.2) a selector that indicating the button bar. 按钮可以定义在一个<div>的标签内:<div class="easyui-dialog" style="width:600px;height:300px"        data-options="title:'My Dialog',buttons:'#bb',modal:true">    Dialog Content.</div><div id="bb">    <a href="#" class="easyui-linkbutton">Save</a>    <a href="#" class="easyui-linkbutton">Close</a></div>该对话框按钮也可以通过数组定义:<div class="easyui-dialog" style="width:600px;height:300px"        data-options="title:'My Dialog',modal:true,            buttons:[{                text:'Save',                handler:function(){...}            },{                text:'Close',                handler:function(){...}            }]">    Dialog Content.</div>

网页中给添加按钮添加的内容。

$("#addBut").click(function() {            $("#addDialog").dialog({                closed : false,                buttons : [ {                    text : '保存',                    iconCls : 'icon-save',                    handler : function() {                    }                }, {                    text : '重置',                    iconCls : 'icon-redo',                    handler : function() {                    }                }, {                    text : '关闭',                    iconCls : 'icon-cancel',                    handler : function() {                    }                } ]            })        })

表单控件

在对话框的div中添加表单，表单中包含一个表格，该表格用来书写里面的布局(4行4列)，除了性别用的是可装载组合框，其它属相都是一个表单验证控件。根据表单的大小调整对话框的大小。

<form action="" id="form1" method="post">            <table>                <tr>                    <td>用户编号</td>                    <td><input type="text" class="easyui-validatebox"                        name="usernumber" required="true"></td>                    <td>用户名称</td>                    <!--required boolean 定义该字段是否应该输入，验证属性表单字段是否必填。-->                    <td><input type="text" class="easyui-validatebox"                        name="username" required="true"></td>                </tr>                <tr>                    <td>用户密码</td>                    <td><input type="password" class="easyui-validatebox"                        name="usernumber" required="true"></td>                    <td>用户性别</td>                    <td><select id="sex" class="easyui-combobox" name="sex"                        style="width: 150px;">                            <option value="0">女</option>                            <option value="1">男</option>                    </select></td>                </tr>                <tr>                    <td>电子邮件</td>                    <td><input type="password" class="easyui-validatebox"                        name="usernumber" required="true"></td>                    <td>联系电话</td>                    <td><input type="text" class="easyui-validatebox"                        name="usernumber" required="true"></td>                </tr>                <tr>                    <td>住址</td>                    <td><input type="password" class="easyui-validatebox"                        name="usernumber" required="true"></td>                    <td>备注</td>                    <td><input type="text" class="easyui-validatebox"                        name="usernumber" required="true"></td>                </tr>            </table>        </form>

添加的时候提交表单

在添加的保存按钮中添加方法主要运用到了表单的一下方法。

submit options 执行submit动作, 这个 options参数是一个对象包含一下属性:url: 这个提交动作的URL地址onSubmit: 在提交之前的回调函数success: 提交成功之后的回调函数下面的示例展示如何提交一个合法form和避免重复提交form$.messager.progress(); // 显示一个进度条 $('#ff').form('submit', {    url: ...,    onSubmit: function(){        var isValid = $(this).form('validate');        if (!isValid){            $.messager.progress('close');  // 当form不合法的时候隐藏工具条        }        return isValid; // 返回false将停止form提交     },    success: function(){        $.messager.progress('close');  // 当成功提交之后隐藏进度条    }}); load data 加载记录填充form. 这个 data 参数可以是一个string或者是一个object类型, 当是string类型的时候将请求远程服务器端数据,其他(例如:object类型)行为定义为加载本地记录. 示例代码:$('#ff').form('load','get_data.php');  // 从URL加载 $('#ff').form('load',{//加载本地记录    name:'name2',    email:'mymail@gmail.com',    subject:'subject2',    message:'message2',    language:5});clear none 清空form数据 validate none 做form字段验证,返回true表示所有字段合法,这个方法使用了validatebox插件plugin

添加提交的方法，在提交之前看输入的字段是否合法，提交成功后将对话框隐藏、重新加载表格的数据、清空表单的内容，显示添加成功的消息提示框。

$("#addBut").click(function() {            $("#addDialog").dialog({                closed : false,                buttons : [ {                    text : '保存',                    iconCls : 'icon-save',                    handler : function() {                        $("#form1").form('submit',{                            url:'userAction!saveUserInfo',                            onSumbit:function(){                                return $("#form1").form('validate');                            },                            success:function(flag){                                if(flag){                                    $("#addDialog").dialog({closed:true});                                    $("#dg").datagrid('reload');                                    $("#form1").form('clear');                                    $.messager.show({                                        title : '消息提示',                                        msg : '添加数据成功',                                        timeout : 5000,                                        showType : 'slide'                                    });                                }                                                                                           }                        })                    }                }, {                    text : '重置',                    iconCls : 'icon-redo',                    handler : function() {                        $("#form1").form('clear');                    }                }, {                    text : '关闭',                    iconCls : 'icon-cancel',                    handler : function() {                    }                } ]            })        })

service层添加保存用户的方法

public static boolean saveUserInfo(User user){          try {            BaseDao.saveOrUpdateObj(user);            return true;        } catch (Exception e) {            e.printStackTrace();            return false;        }           }

控制层新建一个User的引用以及其对应set、get方法，书写对应的保存方法。

    private User user;    public void saveUserInfo() throws Exception {        if (UserService.saveUserInfo(user)) {            toJSON(true);        } else {            toJSON(false);        }    }

将前端页面中表单中控件的name属性修改为控制层引用的名称.实体类（模型）中的成员变量名（user.usernumber）一定要书写正确。

编辑

将添加对话框复制一份，修改其id为editDialog，标题为编辑用户信息，对话框中表单的id为form2，表单中控件的name属性修改为实体类（模型）中的成员变量名。

在点击修改按钮之前判断是否有记录被选中，没有被选择的记录提示选择要修改的数据，选择的记录大于1条时提示只能选择一条，这两种情况都用消息提示框为用户做出提示，当选中的内容只有一条时，通过表格的getSelected()方法获得选择记录的id，并根据该id值去后台查找到该记录将值显示到表单中，接下来的网页要书写的内容与添加纪录相似，只需要更改对应控件的id值。

$("#editBut").click(function(){            if ($("#dg").datagrid('getSelections').length == 0) {                $.messager.alert('消息提示','请选择要修改的数据','error');            }else if ($("#dg").datagrid('getSelections').length >1) {                $.messager.alert('消息提示','只能选择一条数据进行修改','error');                $("#dg").datagrid('unselectAll');            } else{                $("#form2").form('load','userAction!findUserById?fId='+$("#dg").datagrid('getSelected').id);                $("#editDialog").dialog({closed:false,                    buttons : [ {                        text : '保存',                        iconCls : 'icon-save',                        handler : function() {                            $("#form2").form('submit',{                                url:'userAction!updateUserInfo',                                onSumbit:function(){                                    return $("#form2").form('validate');                                },                                success:function(flag){                                    if(flag){                                        $("#editDialog").dialog({closed:true});                                        $("#dg").datagrid('reload');                                        $("#form2").form('clear');                                        $.messager.show({                                            title : '消息提示',                                            msg : '修改数据成功',                                            timeout : 5000,                                            showType : 'slide'                                        });                                    }                                                                                       }                            })                        }                    }, {                        text : '重置',                        iconCls : 'icon-redo',                        handler : function() {                            $("#form2").form('clear');                        }                    }, {                        text : '关闭',                        iconCls : 'icon-cancel',                        handler : function() {                        }                    } ]                });            }        })

为了将id值传递到后台，需要在表单中添加一个隐藏域，其对应的值是模型中的id。

<input type="hidden" class="easyui-validatebox" name="id">

在service层书写查询一条记录的方法

public static User findUserById(Integer id){        return (User) BaseDao.getObject("from User where id="+id);      }

控制器层添加获取用户的方法，其中前台传来的数据获取用getRequest().getParameter(“fId”)获得参数是前台的参数名。

public void findUserById() throws Exception {        User user = UserService.findUserById(Integer.parseInt(getRequest().getParameter("fId")));        toJSON(user);    }

点击保存按钮将修改的数据进行保存后台，service层书写对应的更新方法。

    public static boolean updateUserInfo(User user){        try {            BaseDao.saveOrUpdateObj(user);            return true;        } catch (Exception e) {            e.printStackTrace();            return false;        }           }

控制器层更新时传递的参数是对象，该对象是一个新建的对象，因此需要在模型中添加其对应的构造方法和无参的构造方法，该对象创建时属性的获得，需要将模型中所有属性都拷贝到控制器中，并书写对应的set和get方法。

public void updateUserInfo() throws Exception {        if (UserService.saveUserInfo(new User(id, usernumber, username, password, sex, email, telPhone, address, remark))) {            toJSON(true);        } else {            toJSON(false);        }    }

阅读全文

0 0