jQuery EasyUI教程之datagrid应用(二)
二、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">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
</div>
第二步:使DataGrid可编辑
$('#dg').edatagrid({ url: 'get_users.php', saveUrl: 'save_user.php', updateUrl: 'update_user.php', destroyUrl: 'destroy_user.php' });
为可编辑的datagrid提供了“url”、“saveUrl”、“updateUrl”、“destroyUrl”属性:
url: 从服务器端接收用户数据。
saveUrl: 保存新用户数据。
updateUrl: 更新现有用户数据。
destroyUrl: 删除现有用户数据。
第三步:编写服务器端处理代码
保存新用户(save_user.php):
$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$phone = $_REQUEST['phone'];
$email = $_REQUEST['email'];
include 'conn.php';
$sql = "insert into users(firstname,lastname,phone,email) values('$firstname','$lastname','$phone','$email')";
@mysql_query($sql);
echo json_encode(array(
'id' => mysql_insert_id(),
'firstname' => $firstname,
'lastname' => $lastname,
'phone' => $phone,
'email' => $email
));
更新现有用户(update_user.php):
$id = intval($_REQUEST['id']);
$firstname = $_REQUEST['firstname'];
$lastname = $_REQUEST['lastname'];
$phone = $_REQUEST['phone'];
$email = $_REQUEST['email'];
include 'conn.php';
$sql="update users set firstname='$firstname',lastname='$lastname',phone='$phone',email='$email' where id=$id";
@mysql_query($sql);
echo json_encode(array(
'id' => $id,
'firstname' => $firstname,
'lastname' => $lastname,
'phone' => $phone,
'email' => $email
));
删除现有用户(destroy_user.php):
$id = intval($_REQUEST['id']);
include 'conn.php';
$sql = "delete from users where id=$id";
@mysql_query($sql);
echo json_encode(array('success'=>true));
edatagrid属性
edatagrid的属性从datagrid属性中扩展,下面为edatagrid增加的属性:
属性名 |
类型 |
描述 |
默认值 |
destroyMsg |
object |
The confirm dialog message to display while destroying a row. |
destroyMsg:{ norecord:{ // when no record is selected title:'Warning', msg:'No record is selected.' }, confirm:{ // when select a row title:'Confirm', msg:'Are you sure you want to delete?' } }
|
autoSave |
boolean |
True to auto save the editing row when click out of datagrid. |
false |
url |
string |
A URL to retrieve data from server. |
null |
saveUrl |
string |
A URL to save data to server and return the added row. |
null |
updateUrl |
string |
A URL to update data to server and return the updated row. |
null |
destroyUrl |
string |
A URL to post 'id' parameter to server to destroy that row. |
null |
tree |
selector |
The tree selector to show the corresponding tree component. |
null |
treeUrl |
string |
A URL to retrieve the tree data. |
null |
treeDndUrl |
string |
A URL to process the drag and drop operation. |
null |
treeTextField |
string |
Defines the tree text field name. |
name |
treeParentField |
string |
Defines the tree parent node field name. |
parentId |
edatagrid事件
从datagrid扩展,下面为edatagrid增加的事件:
事件名 |
参数 |
描述 |
onAdd |
index,row |
Fires when a new row is added. |
onEdit |
index,row |
Fires when a row is editing. |
onBeforeSave |
index |
Fires before a row to be saved, return false to cancel this save action. |
onSave |
index,row |
Fires when a row is saved. |
onDestroy |
index,row |
Fires when a row is destroy. |
onError |
index,row |
Fires when the server errors occur. The server should return a row with 'isError' property set to true to indicate some errors occur. Code examples: //server side code echo json_encode(array( 'isError' => true, 'msg' => 'error message.' ));
//client side code $('#dg').edatagrid({ onError: function(index,row){ alert(row.msg); } });
|
edatagrid方法
从datagrid中扩展,下面是为edatagrid增加或重写的方法:
方法名 |
参数 |
描述 |
options |
none |
Return the options object. |
enableEditing |
none |
Enable the datagrid editing. |
disableEditing |
none |
Disable the datagrid editing. |
editRow |
index |
Edit the specified row. |
addRow |
index |
Add a new row to the specified row index. If the index parameter is not specified, append the new row to the last position. Code examples: // append an empty row $('#dg').edatagrid('addRow');
// append an empty row as first row $('#dg').edatagrid('addRow',0);
// insert a row with default values $('#dg').edatagrid('addRow',{ index: 2, row:{ name:'name1', addr:'addr1' } });
|
saveRow |
none |
Save the editing row that will be posted to server. |
cancelRow |
none |
Cancel the editing row. |
destroyRow |
index |
Destroy the current selected row. If the index parameter is not specified, destroy all the selected rows. Code examples: // destroy all the selected rows $('#dg').edatagrid('destroyRow');
// destroy the first row $('#dg').edatagrid('destroyRow', 0);
// destroy the specified rows $('#dg').edatagrid('destroyRow', [3,4,5]);
|
|
|
|