我们会用到如下插件:

第一步：准备数据库

<table title="My Users" url="get_users.php" toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true"> <thead> <tr> <th field="firstname">First Name</th> <th field="lastname">Last Name</th> <th field="phone">Phone</th> <th field="email">Email</th> </tr> </thead> </table> <div> <a href="#" iconCls="icon-add" plain="true">New User</a> <a href="#" iconCls="icon-edit" plain="true">Edit User</a> <a href="#" iconCls="icon-remove" plain="true">Remove User</a> </div>

get_users.php代码文件：

$rs = mysql_query('select * from users'); $result = array(); while($row = mysql_fetch_object($rs)){ array_push($result, $row); } echo json_encode($result);

第三步：创建表单对话框

增加或者编辑用户信息，我们使用同一对话框。

<div closed="true" buttons="#dlg-buttons"> <div>User Information</div> <form method="post"> <div> <label>First Name:</label> <input required="true"> </div> <div> <label>Last Name:</label> <input required="true"> </div> <div> <label>Phone:</label> <input> </div> <div> <label>Email:</label> <input validType="email"> </div> </form> </div> <div> <a href="#" iconCls="icon-ok">Save</a> <a href="#" iconCls="icon-cancel">Cancel</a> </div>

第四步：实现增加和编辑用户功能

增加用户信息时，打开对话框，清除表单数据。

function newUser(){ $('#dlg').dialog('open').dialog('setTitle','New User'); $('#fm').form('clear'); url = 'save_user.php'; }

编辑用户信息时，打开对话框，将选择的数据表格行数据装入表单。

var row = $('#dg').datagrid('getSelected'); if (row){ $('#dlg').dialog('open').dialog('setTitle','Edit User'); $('#fm').form('load',row); url = 'update_user.php?id='+row.id; }

第五步：保存用户数据

使用如下代码来保存用户数据：

function saveUser(){ $('#fm').form('submit',{ url: url, 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 } } }); }

第六步：删除用户

用如下代码来删除用户：

function destroyUser(){ var row = $('#dg').datagrid('getSelected'); if (row){ $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){ if (r){ $.post('destroy_user.php',{id:row.id},function(result){ if (result.success){ $('#dg').datagrid('reload'); // 刷新用户数据 } else { $.messager.show({ // 显示错误信息 title: 'Error', msg: result.errorMsg }); } },'json'); } }); } }

第七步：运行代码