一、利用jQuery EasyUI的DataGrid创建CRUD应用
对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录。本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 。
我们会用到如下插件:
· datagrid: 列表显示数据。
· dialog: 增加或编辑单个用户信息。
· form: 用来提交表单数据。
· messager: 用来显示操作信息。
第一步:准备数据库
使用MySql数据库来保存用户信息,并创建数据库和“users”表。
第二步:创建DataGrid数据表格来显示用户信息
不需要编写任何javascript代码创建DataGrid数据表格。
<
table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
url= "get_users.php"
toolbar= "#toolbar"
rownumbers= "true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</ table>
< div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove User</a>
</ div>
url= "get_users.php"
toolbar= "#toolbar"
rownumbers= "true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50">First Name</th>
<th field="lastname" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</ table>
< div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newUser()">New User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editUser()">Edit User</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyUser()">Remove User</a>
</ div>
如下图所示,我们不需要写任何一行javascript代码:
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);
第三步:创建表单对话框
$result = array();
while($row = mysql_fetch_object($rs)){
array_push($result, $row);
}
echo json_encode($result);
增加或者编辑用户信息,我们使用同一对话框。
<
div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
<div class="ftitle">User Information</div>
<form id="fm" method="post">
<div class="fitem">
<label>First Name:</label>
<input name="firstname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Last Name:</label>
<input name="lastname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Phone:</label>
<input name="phone">
</div>
<div class="fitem">
<label>Email:</label>
<input name="email" class="easyui-validatebox" validType="email">
</div>
</form>
</ div>
< div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveUser()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</ div>
<div class="ftitle">User Information</div>
<form id="fm" method="post">
<div class="fitem">
<label>First Name:</label>
<input name="firstname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Last Name:</label>
<input name="lastname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>Phone:</label>
<input name="phone">
</div>
<div class="fitem">
<label>Email:</label>
<input name="email" class="easyui-validatebox" validType="email">
</div>
</form>
</ div>
< div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" οnclick="saveUser()">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')">Cancel</a>
</ div>
对话框的创建也不需要编写javascript代码。
第四步:实现增加和编辑用户功能
增加用户信息时,打开对话框,清除表单数据。
function newUser(){
$( '#dlg').dialog('open').dialog('setTitle','New User');
$( '#fm').form('clear');
url = 'save_user.php';
}
$( '#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;
}
if (row){
$( '#dlg').dialog('open').dialog('setTitle','Edit User');
$( '#fm').form('load',row);
url = 'update_user.php?id='+row.id;
}
“url”保存URL地址,当保存用户数据时,表单用它来提交(post)数据到服务器。
第五步:保存用户数据
使用如下代码来保存用户数据:
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
}
}
});
}
$( '#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
}
}
});
}
提交表单前,“onSubmit”函数被调用,此时可校验表单字段值。当表单字段值提交成功,关闭对话框和刷新数据表格数据。
第六步:删除用户
用如下代码来删除用户:
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');
}
});
}
}
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');
}
});
}
}
二、DataGrid的扩展应用
上一份教程我们创建的一个CRUD应用是使用对话框组件来增加或编辑用户信息。本教程将教你如何创建一个CRUD 数据表格(datagrid). 为了让这些CRUD功能正常工作,我们会用到edatagrid.js插件。
第一步:在HTML标识里定义DataGrid
<
table id="dg" title="My Users" style="width:550px;height:250px"
toolbar= "#toolbar" idField="id"
rownumbers= "true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
<th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
<th field="phone" width="50" editor="text">Phone</th>
<th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>
</tr>
</thead>
</ table>
< div id="toolbar">
toolbar= "#toolbar" idField="id"
rownumbers= "true" fitColumns="true" singleSelect="true">
<thead>
<tr>
<th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
<th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
<th field="phone" width="50" editor="text">Phone</th>
<th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>
</tr>
</thead>
</ table>
< div id="toolbar">