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

添加按钮

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

添加对话窗体

在页面的表格下添加一个面书写一个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>