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