网格演示 - 弹出对话框的方式新增网格数据

• 创建对话框

 1 <%--新增时候弹出的对话框--%>
 2 <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
 3      closed="true" buttons="#dlg-buttons">
 4     <div class="ftitle">User Information</div>
 5     <form id="fm" method="post">
 6         <div class="fitem">
 7             <label>First Name:</label>
 8             <input name="firstname" class="easyui-validatebox" required="true">
 9         </div>
10         <div class="fitem">
11             <label>Last Name:</label>
12             <input name="lastname" class="easyui-validatebox" required="true">
13         </div>
14         <div class="fitem">
15             <label>Phone:</label>
16             <input name="phone">
17         </div>
18         <div class="fitem">
19             <label>Email:</label>
20             <input name="email" class="easyui-validatebox" validType="email">
21         </div>
22     </form>
23 </div>
24 <div id="dlg-buttons">
25     <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
26     <a href="#" class="easyui-linkbutton" iconCls="icon-cancel"
27        onclick="javascript:$(‘#dlg‘).dialog(‘close‘)">Cancel</a>
28 </div>

• 网格对象上点击新增的时候弹出新增对话框

 1         toolbar: [
 2             {
 3                 iconCls: ‘icon-add‘,
 4                 handler: function () {
 5                     $(‘#dlg‘).dialog(‘open‘).dialog(‘setTitle‘, ‘New User‘);
 6                     $(‘#fm‘).form(‘clear‘);
 7                 }
 8
 9             }, ‘-‘, {
10                 iconCls: ‘icon-edit‘,
11                 handler: function () {
12                     alert("修改");
13                 }
14             }, ‘-‘, {
15                 iconCls: ‘icon-remove‘,
16                 handler: function () {
17                     alert("移除");
18                 }
19             }
20         ],

• 实现save方法

        function saveUser(){
            $(‘#fm‘).form(‘submit‘,{
                url: "<%=homePage%>/test/testController.ajax?datagrid=1",
                onSubmit: function(){
                    return $(this).form(‘validate‘);
                },
                success: function(result){
                    var result = eval(‘(‘+result+‘)‘);
                    if (result.errorMsg){
                        $.messager.show({
                            title: ‘Error‘,
                            msg: result.errorMsg
                        });
                    } else {
                        $(‘#dlg‘).dialog(‘close‘);        // close the dialog
                        $(‘#dg‘).datagrid(‘reload‘);    // reload the user data
                    }
                }
            });
        }