配合着上篇里面的datagrid ,点击编辑按钮,出来修改数据的对话框
toolbar : [ { //顶部工具栏的DataGrid面板.
iconCls : 'icon-edit',
text : "编辑",
handler : function() {//先选中一条数据,再点击'编辑' 按钮,可以弹出一个框,进行编辑
//同时表里面的信息也可以随时更新
var fmobj = $("#tab").datagrid("getSelected"); //返回第一个被选中的行
// alert(fmobj);
$("#fm").form("load", fmobj); //读取记录填充到表单中。数据参数可以是一个字//符串或一个对象类型
$("#dialog").dialog("open"); //打开对话框
}
}, "-", {
iconCls : 'icon-help',
text : "帮助",
handler : function() {
alert('帮助按钮')
}
} ],
<table id="tab"></table>
<div id="dialog" class="easyui-dialog" data-options="closed:true,buttons:[{
text:'保存',
handler:function(){} <!-- 一开始默认的是关闭这个对话框,closed:true --!>
},{
text:'关闭',
handler:function(){}
}]">
<form id="fm"> <!-- 点击编辑的时候,出现的对话框 --!>
<table>
<tr>
<td><input class="easyui-textbox" name="username"
data-options="label:'用户名:',labelWidth:60" /></td>
</tr>
<tr>
<td><input class="easyui-textbox" name="password"
data-options="label:'密码:',labelWidth:60" /></td>
</tr>
<tr>
<td><input class="easyui-textbox" name="realname"
data-options="label:'姓名:',labelWidth:60" /></td>
</tr>
<tr>
<td><input class="easyui-textbox" name="sex"
data-options="label:'性别:',labelWidth:60" /></td>
</tr>
<tr>
<td><input class="easyui-textbox" name="createtime"
data-options="label:'创建时间:',labelWidth:60" /></td>
</tr>
</table>
</form>
</div>
对话框里面的信息,修改完成,需要用ajax获取一下请求,同时还要写代码用datagrid里面的reload方法 重载行。等同于'load'方法,但是它将保持在当前页。