把datagrid里面的值通过对话框的形式进行数据的修改

    配合着上篇里面的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'方法,但是它将保持在当前页。

原文地址:https://www.cnblogs.com/zuo72/p/8260583.html