欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery EasyUI教程之datagrid应用(二)

程序员文章站 2024-02-03 21:04:34
...
jQuery EasyUI教程之datagrid应用(二)

 

  二、DataGrid的扩展应用

    上一份教程我们创建的一个CRUD应用是使用对话框组件来增加或编辑用户信息。本教程将教你如何创建一个CRUD 数据表格(datagrid为了让这些CRUD功能正常工作,我们会用到edatagrid.js插件

jQuery EasyUI教程之datagrid应用(二)


第一步:在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]);