先在datagrid中添加toolbar配置项，增删改差的按钮，有3个属性，按钮名称，图标，回调函数，点击按钮会弹出一个对话框dialog,
dialog是关闭的，closed=true, toolbar:[ {text:"新增用户",
iconCls:"icon-add",
handler:function(){
$("#dd").dialog("open"); } },
{text:"编辑用户",
iconCls:"icon-edit" }, {text:"查询用户",
iconCls:"icon-search" }, {text:"删除用户",
iconCls:"icon-remove" } ],
dialog中有个form表单，注意form表单的method=true，不然提交表单的url携带的参数会被覆盖，只能在html指定，在form组件ajax请求中type指定不起作用
<div id="dd" title="用户新增" class="easyui-dialog" style="width:400px;height:400px;" closed=true>
<form id="userform" method="post">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username"
required="true" class="easyui-validatebox" validType="namerules"
missingMessage="用户名不能为空"
></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" name="password" required="true"
id="password" class="easyui-validatebox" validType="minLength[5,8]" missingMessage="密码不能为空" invalidMessage="密码在5到8位之间"
></td>
</tr>
<tr>
<td>性别</td>
<td>男：<input type="radio" name="sex" value=""> 女：<input
type="radio" name="sex" value=""></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" id="age"></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="birthday" id="birthday"></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" name="city" id="city" class="easyui-combobox" url="servlet1/userServlet1?method=getcity" valueField="id" textField="name"></td>
</tr>
<tr>
<td>薪水</td>
<td><input type="text" name="salary" id="salary" validType="salrules[1000,20500]" invalidMessage="薪水在1000到20500之间" class="easyui-validatebox" required=true missingMessage="薪水不能为空"></td>
</tr>
<tr>
<td>起始时间</td>
<td><input type="text" name="starttime" id="starttime"></td>
</tr>
<tr>
<td>结束时间</td>
<td><input type="text" name="endtime" id="endtime"></td>
</tr> </table>
<tr colspan="" align="center">
<td colspan=""><a class="easyui-linkbutton" id="btn">点击</a></td>
</tr>
</form>
提交表单
$("#btn").click(function() { $("#userform").form("submit", {
url : "servlet1/userServlet1?method=save",
onSubmit : function() { //结合form组件的validate校验
if (!$("#userform").form("validate")) {
$.messager.show({
type : "post",
title : "提示信息",
msg : "验证没有通过，请重新提交表单"
})
return false
} }, success : function(data) {
var data = $.parseJSON(data);
$("#dd").dialog("close");//成功后要关闭对话框
$("#tableid").datagrid("reload");//同时刷新表格
$.messager.show({
title : data.status,
msg : data.message
})
},
error : function(data) {
var data = $.parseJSON(data);
$.messager.show({
title : data.status,
msg : data.message
})
}
}) })
新增之后，再次点击新增，表格会有原先新增的数据，所以再次点击新增时，需要清空一下表单：
清空表单的方法：
1、
$("#userform").find("input[name!=sex]").val(""); //一定要筛选下name！=sex，不然单选按钮或者有什么默认选项的也会被清空/
2、dom清空
$("#userform").get(0).reset();//调用dom的reset方法重置下
3、easyui form组件clear方法
$("#userform").form("clear");//这里不可用，会将sex默认值清空
toolbar:[
{text:"新增用户",
iconCls:"icon-add",
handler:function(){
$("#userform").get(0).reset();//先清空表格
$("#dd").dialog("open");//弹出表格
}
},
{text:"编辑用户",
iconCls:"icon-edit"
}, {text:"查询用户",
iconCls:"icon-search"
}, {text:"删除用户",
iconCls:"icon-remove"
}
],
