jQuery EasyUI教程之datagrid应用（二）

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]);