首页 > 代码库 > jQuery EasyUI教程之datagrid应用

jQuery EasyUI教程之datagrid应用

2024-08-11 18:54:44   221人阅读

一、利用jQuery EasyUI的DataGrid创建CRUD应用

 

    对网页应用程序来说，正确采集和管理数据通常很有必要，DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录。本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 。

我们会用到如下插件:

· datagrid: 列表显示数据。

· dialog: 增加或编辑单个用户信息。

· form: 用来提交表单数据。

· messager: 用来显示操作信息。

 

第一步：准备数据库

 

使用MySql数据库来保存用户信息，并创建数据库和“users”表。

技术分享

 

 

第二步：创建DataGrid数据表格来显示用户信息

不需要编写任何javascript代码创建DataGrid数据表格。

Html代码  技术分享
  1. <table id="dg" title="My Users" class="easyui-datagrid"       style="width:550px;height:250px"  
  2. url="get_users.php"  
  3. toolbar="#toolbar"  
  4. rownumbers="true" fitColumns="true" singleSelect="true">  
  5.     <thead>  
  6.         <tr>  
  7.             <th field="firstname" width="50">First Name</th>  
  8.             <th field="lastname" width="50">Last Name</th>  
  9.             <th field="phone" width="50">Phone</th>  
  10.             <th field="email" width="50">Email</th>  
  11.         </tr>  
  12.     </thead>  
  13. </table>  
  14. <div id="toolbar">  
  15.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>  
  16.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>  
  17.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>  
  18. </div>  

 

如下图所示，我们不需要写任何一行javascript代码:
技术分享

DataGrid使用“url”属性来指定“get_users.php”，用来从服务器端接收数据。

get_users.php代码文件：

Js代码  技术分享
  1. $rs = mysql_query(‘select * from users‘);  
  2. $result = array();  
  3. while($row = mysql_fetch_object($rs)){  
  4.     array_push($result, $row);  
  5. }  
  6. echo json_encode($result);  

 

第三步：创建表单对话框

 

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

Html代码  技术分享
  1. <div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px" closed="true" buttons="#dlg-buttons">  
  2.     <div class="ftitle">User Information</div>  
  3.     <form id="fm" method="post">  
  4.         <div class="fitem">  
  5.             <label>First Name:</label>  
  6.             <input name="firstname" class="easyui-validatebox" required="true">  
  7.         </div>  
  8.         <div class="fitem">  
  9.             <label>Last Name:</label>  
  10.             <input name="lastname" class="easyui-validatebox" required="true">  
  11.         </div>  
  12.         <div class="fitem">  
  13.             <label>Phone:</label>  
  14.             <input name="phone">  
  15.         </div>  
  16.         <div class="fitem">  
  17.             <label>Email:</label>  
  18.             <input name="email" class="easyui-validatebox" validType="email">  
  19.         </div>  
  20.     </form>  
  21. </div>  
  22. <div id="dlg-buttons">  
  23.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>  
  24.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$(‘#dlg‘).dialog(‘close‘)">Cancel</a>  
  25. </div>  

 

对话框的创建也不需要编写javascript代码。
技术分享 

 

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

 

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

Js代码  技术分享
  1. function newUser(){  
  2.     $(‘#dlg‘).dialog(‘open‘).dialog(‘setTitle‘,‘New User‘);  
  3.     $(‘#fm‘).form(‘clear‘);  
  4.     url = ‘save_user.php‘;  
  5. }  

 

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

Js代码  技术分享
  1. var row = $(‘#dg‘).datagrid(‘getSelected‘);  
  2. if (row){  
  3.     $(‘#dlg‘).dialog(‘open‘).dialog(‘setTitle‘,‘Edit User‘);  
  4.     $(‘#fm‘).form(‘load‘,row);  
  5.     url = ‘update_user.php?id=‘+row.id;  
  6. }  

 

“url”保存URL地址，当保存用户数据时，表单用它来提交（post）数据到服务器。

 

第五步：保存用户数据

 

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

Js代码  技术分享
  1. function saveUser(){  
  2.     $(‘#fm‘).form(‘submit‘,{  
  3.         url: url,  
  4.         onSubmit: function(){  
  5.             return $(this).form(‘validate‘);  
  6.         },  
  7.         success: function(result){  
  8.             var result = eval(‘(‘+result+‘)‘);  
  9.             if (result.errorMsg){  
  10.                 $.messager.show({  
  11.                     title: ‘Error‘,  
  12.                     msg: result.errorMsg  
  13.                 });  
  14.             } else {  
  15.                 $(‘#dlg‘).dialog(‘close‘); // close the dialog  
  16.                 $(‘#dg‘).datagrid(‘reload‘); // reload the user data  
  17.             }  
  18.         }  
  19.     });  
  20. }  

 

提交表单前，“onSubmit”函数被调用，此时可校验表单字段值。当表单字段值提交成功，关闭对话框和刷新数据表格数据。

 

第六步：删除用户

 

用如下代码来删除用户：

Js代码  技术分享
  1. function destroyUser(){  
  2.     var row = $(‘#dg‘).datagrid(‘getSelected‘);  
  3.     if (row){  
  4.         $.messager.confirm(‘Confirm‘,‘Are you sure you want to destroy this user?‘,function(r){  
  5.             if (r){  
  6.                 $.post(‘destroy_user.php‘,{id:row.id},function(result){  
  7.                     if (result.success){  
  8.                         $(‘#dg‘).datagrid(‘reload‘); // 刷新用户数据  
  9.                     } else {  
  10.                         $.messager.show({ // 显示错误信息  
  11.                             title: ‘Error‘,  
  12.                             msg: result.errorMsg  
  13.                         });  
  14.                     }  
  15.                 },‘json‘);  
  16.             }  
  17.         });  
  18.     }  
  19. }  

技术分享 

删除一行数据时，会弹出一个confirm对话框来让我们选择确定是否真的删除数据行。当删除数据成功，调用“reload”方法刷新datagrid数据。

 

 

 

 

二、DataGrid的扩展应用

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

技术分享

 

第一步：在HTML标识里定义DataGrid

 

Html代码  技术分享
  1. <table id="dg" title="My Users" style="width:550px;height:250px"  
  2. toolbar="#toolbar" idField="id"  
  3. rownumbers="true" fitColumns="true" singleSelect="true">  
  4.     <thead>  
  5.         <tr>  
  6.             <th field="firstname" width="50" editor="{type:‘validatebox‘,options:{required:true}}">First Name</th>  
  7.             <th field="lastname" width="50" editor="{type:‘validatebox‘,options:{required:true}}">Last Name</th>  
  8.             <th field="phone" width="50" editor="text">Phone</th>  
  9.             <th field="email" width="50" editor="{type:‘validatebox‘,options:{validType:‘email‘}}">Email</th>  
  10.         </tr>  
  11.     </thead>  
  12. </table>  
  13. <div id="toolbar">  
  14.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$(‘#dg‘).edatagrid(‘addRow‘)">New</a>  
  15.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$(‘#dg‘).edatagrid(‘destroyRow‘)">Destroy</a>  
  16.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$(‘#dg‘).edatagrid(‘saveRow‘)">Save</a>  
  17.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$(‘#dg‘).edatagrid(‘cancelRow‘)">Cancel</a>  
  18. </div>  

 

第二步：使DataGrid可编辑 

 

Js代码  技术分享
  1. $(‘#dg‘).edatagrid({  
  2.     url: ‘get_users.php‘,  
  3.     saveUrl: ‘save_user.php‘,  
  4.     updateUrl: ‘update_user.php‘,  
  5.     destroyUrl: ‘destroy_user.php‘  
  6. });  

 

为可编辑的datagrid提供了“url”、“saveUrl”、“updateUrl”、“destroyUrl”属性：

url: 从服务器端接收用户数据。
saveUrl: 保存新用户数据。
updateUrl: 更新现有用户数据。
destroyUrl: 删除现有用户数据。

 

第三步：编写服务器端处理代码

 

保存新用户（save_user.php）：

 

Php代码  技术分享
  1. $firstname = $_REQUEST[‘firstname‘];  
  2. $lastname = $_REQUEST[‘lastname‘];  
  3. $phone = $_REQUEST[‘phone‘];  
  4. $email = $_REQUEST[‘email‘];   
  5. include ‘conn.php‘;   
  6. $sql = "insert into users(firstname,lastname,phone,email) values(‘$firstname‘,‘$lastname‘,‘$phone‘,‘$email‘)";  
  7. @mysql_query($sql);  
  8. echo json_encode(array(  
  9.     ‘id‘ => mysql_insert_id(),  
  10.     ‘firstname‘ => $firstname,  
  11.     ‘lastname‘ => $lastname,  
  12.     ‘phone‘ => $phone,  
  13.     ‘email‘ => $email  
  14. ));  

 

更新现有用户（update_user.php）：

 

Php代码  技术分享
  1. $id = intval($_REQUEST[‘id‘]);  
  2. $firstname = $_REQUEST[‘firstname‘];  
  3. $lastname = $_REQUEST[‘lastname‘];  
  4. $phone = $_REQUEST[‘phone‘];  
  5. $email = $_REQUEST[‘email‘];   
  6. include ‘conn.php‘;   
  7. $sql="update users set firstname=‘$firstname‘,lastname=‘$lastname‘,phone=‘$phone‘,email=‘$email‘ where id=$id";  
  8. @mysql_query($sql);  
  9. echo json_encode(array(  
  10.     ‘id‘ => $id,  
  11.     ‘firstname‘ => $firstname,  
  12.     ‘lastname‘ => $lastname,  
  13.     ‘phone‘ => $phone,  
  14.     ‘email‘ => $email  
  15. ));  

 

删除现有用户（destroy_user.php）：

Php代码  技术分享
  1. $id = intval($_REQUEST[‘id‘]);   
  2. include ‘conn.php‘;   
  3. $sql = "delete from users where id=$id";  
  4. @mysql_query($sql);  
  5. 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]);

 

 

 

三、设定或定制各种功能

 

1、增加分页


技术分享
 

创建DataGrid数据表格

 

设置“url”属性，用来装入远端服务器数据，服务器返回JSON格式数据。

Html代码代码  技术分享
  1. <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"  
  2. url="datagrid2_getdata.php"  
  3. title="Load Data" iconCls="icon-save"  
  4. rownumbers="true" pagination="true">  
  5.     <thead>  
  6.         <tr>  
  7.             <th field="itemid" width="80">Item ID</th>  
  8.             <th field="productid" width="80">Product ID</th>  
  9.             <th field="listprice" width="80" align="right">List Price</th>  
  10.             <th field="unitcost" width="80" align="right">Unit Cost</th>  
  11.             <th field="attr1" width="150">Attribute</th>  
  12.             <th field="status" width="60" align="center">Stauts</th>  
  13.         </tr>  
  14.     </thead>  
  15. </table>  

 定义datagrid列，将“pagination”属性设为true，将会在datagrid底部生成一个分页工具条。 pagination会发送两个参数给服务器：

　　１、page: 页码，从1开始。
　　２、rows: 每页显示行数。


服务器端代码

 

Php代码  技术分享
  1. $page = isset($_POST[‘page‘]) ? intval($_POST[‘page‘]) : 1;  
  2. $rows = isset($_POST[‘rows‘]) ? intval($_POST[‘rows‘]) : 10;  
  3. // ...  
  4.   
  5. $rs = mysql_query("select count(*) from item");  
  6. $row = mysql_fetch_row($rs);  
  7. $result["total"] = $row[0];   
  8. $rs = mysql_query("select * from item limit $offset,$rows");   
  9. $items = array();  
  10. while($row = mysql_fetch_object($rs)){  
  11.     array_push($items, $row);  
  12. }  
  13.   
  14. $result["rows"] = $items;   
  15. echo json_encode($result);  

 
2、增加搜索

 


技术分享
 

创建DataGrid


创建一个有分页特性的datagrid，然后增加一个搜索工具条。

Html代码  技术分享
  1. <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"  
  2. url="datagrid24_getdata.php" toolbar="#tb"  
  3. title="Load Data" iconCls="icon-save"  
  4. rownumbers="true" pagination="true">  
  5.     <thead>  
  6.         <tr>  
  7.             <th field="itemid" width="80">Item ID</th>  
  8.             <th field="productid" width="80">Product ID</th>  
  9.             <th field="listprice" width="80" align="right">List Price</th>  
  10.             <th field="unitcost" width="80" align="right">Unit Cost</th>  
  11.             <th field="attr1" width="150">Attribute</th>  
  12.             <th field="status" width="60" align="center">Stauts</th>  
  13.         </tr>  
  14.     </thead>  
  15. </table>  

 工具条定义为：

Html代码  技术分享
  1. <div id="tb" style="padding:3px">  
  2.     <span>Item ID:</span>  
  3.     <input id="itemid" style="line-height:26px;border:1px solid #ccc">  
  4.     <span>Product ID:</span>  
  5.     <input id="productid" style="line-height:26px;border:1px solid #ccc">  
  6.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>  
  7. </div>  

 用户输入搜索值，然后点击搜索按钮，“doSearch”函数将会被调用：

Js代码  技术分享
  1. function doSearch() {  
  2.     $(‘#tt‘).datagrid(‘load‘, {  
  3.         itemid: $(‘#itemid‘).val(),  
  4.         productid: $(‘#productid‘).val()  
  5.     });  
  6. }  

 上面的代码调用“load”方法来装载新的datagrid数据，同时需要传递“itemid”和“productid”参数到服务器。


服务器端代码

Php代码  技术分享
  1. include ‘conn.php‘;   
  2.   
  3. $page = isset($_POST[‘page‘]) ? intval($_POST[‘page‘]) : 1;  
  4. $rows = isset($_POST[‘rows‘]) ? intval($_POST[‘rows‘]) : 10;  
  5. $itemid = isset($_POST[‘itemid‘]) ? mysql_real_escape_string($_POST[‘itemid‘]) : ‘‘;  
  6. $productid = isset($_POST[‘productid‘]) ? mysql_real_escape_string($_POST[‘productid‘]) : ‘‘;   
  7. $offset = ($page-1)*$rows;   
  8.   
  9. $result = array();   
  10. $where = "itemid like ‘$itemid%‘ and productid like ‘$productid%‘";  
  11. $rs = mysql_query("select count(*) from item where " . $where);  
  12. $row = mysql_fetch_row($rs);  
  13. $result["total"] = $row[0];   
  14.   
  15. $rs = mysql_query("select * from item where " . $where . " limit $offset,$rows");   
  16. $items = array();  
  17. while($row = mysql_fetch_object($rs)){  
  18.     array_push($items, $row);  
  19. }  
  20.   
  21. $result["rows"] = $items;   
  22. echo json_encode($result);  

 

3、获取选择行数据

本示例教你如何获取选择行数据。


技术分享
 

Datagrid组件含有两个方法用来接收选择行数据：

  • getSelected: 获取所选择行的第一行数据，如果没有行被选择返回null，否则返回数据记录。
  • getSelections: 获取所有选择行数据，返回数组数据，里面的数组元素就是数据记录。

创建DataGrid

 

Html代码  技术分享
  1. <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"  
  2. url="data/datagrid_data.json"  
  3. title="Load Data" iconCls="icon-save">  
  4.     <thead>  
  5.         <tr>  
  6.         <th field="itemid" width="80">Item ID</th>  
  7.         <th field="productid" width="80">Product ID</th>  
  8.         <th field="listprice" width="80" align="right">List Price</th>  
  9.         <th field="unitcost" width="80" align="right">Unit Cost</th>  
  10.         <th field="attr1" width="150">Attribute</th>  
  11.         <th field="status" width="60" align="center">Stauts</th>  
  12.         </tr>  
  13.     </thead>  
  14. </table>  

 

实例用法

获取单行数据：

 

Js代码  技术分享
  1. var row = $(‘#tt‘).datagrid(‘getSelected‘);  
  2. if (row){  
  3.     alert(‘Item ID:‘+row.itemid+"\nPrice:"+row.listprice);  
  4. }  

 获取所有行itemid：

Js代码  技术分享
  1. var ids = [];  
  2. var rows = $(‘#tt‘).datagrid(‘getSelections‘);  
  3. for(var i=0; i<rows.length; i++){  
  4.     ids.push(rows[i].itemid);  
  5. }  
  6. alert(ids.join(‘\n‘));  

 

4、增加工具条

本示例教你如何增加一个工具条到datagrid中。
 
创建DataGrid

技术分享
 

 

Html代码  技术分享
  1. <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"  
  2. url="data/datagrid_data.json"  
  3. title="DataGrid with Toolbar" iconCls="icon-save"  
  4. toolbar="#tb">  
  5.     <thead>  
  6.     <tr>  
  7.         <th field="itemid" width="80">Item ID</th>  
  8.         <th field="productid" width="80">Product ID</th>  
  9.         <th field="listprice" width="80" align="right">List Price</th>  
  10.         <th field="unitcost" width="80" align="right">Unit Cost</th>  
  11.         <th field="attr1" width="150">Attribute</th>  
  12.         <th field="status" width="60" align="center">Stauts</th>  
  13.     </tr>  
  14.     </thead>  
  15. </table>  
  16.   
  17. <div id="tb">  
  18.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert(‘Add‘)">Add</a>  
  19.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert(‘Cut‘)">Cut</a>  
  20.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert(‘Save‘)">Save</a>  
  21. </div>  

 

5、复杂工具条

datagrid的工具条不仅仅只是包含按钮，还可以是其它的组件。为方便布局，你可以通过现有的构成datagrid工具条的DIV来定义工具条。本教程教你如何创建一个复杂的工具条，作为datagrid的组件。

技术分享
 
创建Toolbar

 

 

Html代码  技术分享
  1. <div id="tb" style="padding:5px;height:auto">  
  2.     <div style="margin-bottom:5px">  
  3.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>  
  4.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>  
  5.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>  
  6.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>  
  7.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>  
  8.     </div>  
  9.     <div>  
  10.     Date From: <input class="easyui-datebox" style="width:80px">  
  11.     To: <input class="easyui-datebox" style="width:80px">  
  12.     Language:   
  13.     <input class="easyui-combobox" style="width:100px"  
  14.     url="data/combobox_data.json"  
  15.     valueField="id" textField="text">  
  16.     <a href=http://www.mamicode.com/"#" class="easyui-linkbutton" iconCls="icon-search">Search</a>  
  17.     </div>  
  18. </div>  

 

创建DataGrid

 

 

Html代码  技术分享
  1. <table class="easyui-datagrid" style="width:600px;height:250px"  
  2. url="data/datagrid_data.json"   
  3. title="DataGrid - Complex Toolbar" toolbar="#tb"  
  4. singleSelect="true" fitColumns="true">  
  5.     <thead>  
  6.     <tr>  
  7.         <th field="itemid" width="60">Item ID</th>  
  8.         <th field="productid" width="80">Product ID</th>  
  9.         <th field="listprice" align="right" width="70">List Price</th>  
  10.         <th field="unitcost" align="right" width="70">Unit Cost</th>  
  11.         <th field="attr1" width="200">Address</th>  
  12.         <th field="status" width="50">Status</th>  
  13.     </tr>  
  14.     </thead>  
  15. </table>  

 

6、冻结列

本示例演示如何冻结数据列，当用户水平滚动数据表格时，冻结的数据列不会滚动出视图界面外。
 
技术分享
 
通过定义frozenColumns属性来冻结列，冻结列属性的定义同列属性。

 

Js代码  技术分享
  1. $(‘#tt‘).datagrid({  
  2.     title: ‘Frozen Columns‘,  
  3.     iconCls: ‘icon-save‘,  
  4.     width: 500,  
  5.     height: 250,  
  6.     url: ‘data/datagrid_data.json‘,  
  7.     frozenColumns: [[{  
  8.         field: ‘itemid‘,  
  9.         title: ‘Item ID‘,  
  10.         width: 80  
  11.     },  
  12.     {  
  13.         field: ‘productid‘,  
  14.         title: ‘Product ID‘,  
  15.         width: 80  
  16.     },  
  17.     ]],  
  18.     columns: [[{  
  19.         field: ‘listprice‘,  
  20.         title: ‘List Price‘,  
  21.         width: 80,  
  22.         align: ‘right‘  
  23.     },  
  24.     {  
  25.         field: ‘unitcost‘,  
  26.         title: ‘Unit Cost‘,  
  27.         width: 80,  
  28.         align: ‘right‘  
  29.     },  
  30.     {  
  31.         field: ‘attr1‘,  
  32.         title: ‘Attribute‘,  
  33.         width: 100  
  34.     },  
  35.     {  
  36.         field: ‘status‘,  
  37.         title: ‘Status‘,  
  38.         width: 60  
  39.     }]]  
  40. });  

 创建冻结列的datagrid可以不用编写任何javascript代码，如下面这样：

 

Html代码  技术分享
  1. <table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:500px;height:250px"  
  2. url="data/datagrid_data.json"  
  3. singleSelect="true" iconCls="icon-save">  
  4.     <thead frozen="true">  
  5.     <tr>  
  6.         <th field="itemid" width="80">Item ID</th>  
  7.         <th field="productid" width="80">Product ID</th>  
  8.         </tr>  
  9.         </thead>  
  10.         <thead>  
  11.         <tr>  
  12.         <th field="listprice" width="80" align="right">List Price</th>  
  13.         <th field="unitcost" width="80" align="right">Unit Cost</th>  
  14.         <th field="attr1" width="150">Attribute</th>  
  15.         <th field="status" width="60" align="center">Stauts</th>  
  16.     </tr>  
  17.     </thead>  
  18. </table>  

 

7、格式化数据列

下面为EasyUI DataGrid里的格式化列示例，用一个定制的列格式化器（formatter）来将文本标注为红色，如果价格低于20的话。
 
技术分享
 
为格式化一个DataGrid列，我们需要设置格式化属性，它是一个函数。格式化函数含有三个参数：

  • value: 当前绑定的列字段值。
  • row: 当前行记录数据。
  • index: 当前行索引。

创建DataGrid

 

 

Html代码  技术分享
  1. <table id="tt" title="Formatting Columns" class="easyui-datagrid" style="width:550px;height:250px"  
  2. url="data/datagrid_data.json"  
  3. singleSelect="true" iconCls="icon-save">  
  4.     <thead>  
  5.     <tr>  
  6.         <th field="itemid" width="80">Item ID</th>  
  7.         <th field="productid" width="80">Product ID</th>  
  8.         <th field="listprice" width="80" align="right" formatter="formatPrice">List Price</th>  
  9.         <th field="unitcost" width="80" align="right">Unit Cost</th>  
  10.         <th field="attr1" width="100">Attribute</th>  
  11.         <th field="status" width="60" align="center">Stauts</th>  
  12.     </tr>  
  13.     </thead>  
  14. </table>  

 注意：“listprice”字段有一个“formatter”属性，用来指明格式化函数。

 

编写格式化函数

 

Js代码  技术分享
  1. function formatPrice(val,row){  
  2.     if (val < 20){  
  3.     return ‘<span style="color:red;">(‘+val+‘)</span>‘;  
  4.     } else {  
  5.     return val;  
  6.     }  
  7. }  

 

8、增加排序功能

本示例演示如何通过点击列表头来排序DataGrid数据。
 
技术分享
 
DataGrid中的全部列都可以排序，可以定义哪一个列进行排序。默认列属性不会进行排序，除非列的排序属性sortable设置为true。

创建DataGrid

Js代码  技术分享
  1. <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"  
  2. url="datagrid8_getdata.php"  
  3. title="Load Data" iconCls="icon-save"  
  4. rownumbers="true" pagination="true">  
  5.     <thead>  
  6.     <tr>  
  7.         <th field="itemid" width="80" sortable="true">Item ID</th>  
  8.         <th field="productid" width="80" sortable="true">Product ID</th>  
  9.         <th field="listprice" width="80" align="right" sortable="true">List Price</th>  
  10.         <th field="unitcost" width="80" align="right" sortable="true">Unit Cost</th>  
  11.         <th field="attr1" width="150">Attribute</th>  
  12.         <th field="status" width="60" align="center">Stauts</th>  
  13.     </tr>  
  14.     </thead>  
  15. </table>  

 定义了可排序的列为：itemid、productid、listprice、unitcost等。“attr1”列和“status”列不能排序。
DataGrid的排序会发送两个参数给服务器：

  • sort: 排序列字段名。
  • order: 排序方式，可以是“asc（升序）”或“desc（降序）”,默认为“asc”。

服务器端代码

 

 

Php代码  技术分享
  1. $page = isset($_POST[‘page‘]) ? intval($_POST[‘page‘]) : 1;  
  2. $rows = isset($_POST[‘rows‘]) ? intval($_POST[‘rows‘]) : 10;  
  3. $sort = isset($_POST[‘sort‘]) ? strval($_POST[‘sort‘]) : ‘itemid‘;  
  4. $order = isset($_POST[‘order‘]) ? strval($_POST[‘order‘]) : ‘asc‘;  
  5. $offset = ($page-1)*$rows;  
  6.   
  7. $result = array();   
  8.   
  9. include ‘conn.php‘;   
  10.   
  11. $rs = mysql_query("select count(*) from item");  
  12. $row = mysql_fetch_row($rs);  
  13. $result["total"] = $row[0];   
  14.   
  15. $rs = mysql_query("select * from item order by $sort $order limit $offset,$rows");   
  16. $items = array();  
  17. while($row = mysql_fetch_object($rs)){  
  18.     array_push($items, $row);  
  19. }  
  20.   
  21. $result["rows"] = $items;   
  22. echo json_encode($result);  

 

9、增加选择框

本教程教你如何放置一个checkbox 列到 DataGrid中。利用选择框用户可以即刻选择/取消所有表格数据行。
 
技术分享
 
为增加一个checkbox列，我们只需简单将checkbox属性设置为true即可。代码如下所示：

 

Html代码  技术分享
  1. <table id="tt" title="Checkbox Select" class="easyui-datagrid" style="width:550px;height:250px"  
  2. url="data/datagrid_data.json"  
  3. idField="itemid" pagination="true"  
  4. iconCls="icon-save">  
  5.     <thead>  
  6.     <tr>  
  7.         <th field="ck" checkbox="true"></th>  
  8.         <th field="itemid" width="80">Item ID</th>  
  9.         <th field="productid" width="80">Product ID</th>  
  10.         <th field="listprice" width="80" align="right">List Price</th>  
  11.         <th field="unitcost" width="80" align="right">Unit Cost</th>  
  12.         <th field="attr1" width="100">Attribute</th>  
  13.         <th field="status" width="60" align="center">Status</th>  
  14.     </tr>  
  15.     </thead>  
  16. </table>  

 上面的代码增加了一个含有checkbox属性的列，从而生成了一个选择框列。如果idField属性被设置，DataGrid的已选行在不同的页面里都可以维持。

 

10、增强行内编辑

Datagrid最近增加了一个可编辑功能，它使用户可增加新行到datagrid中，用户也可对单行或多行数据进行更新。
本教程教你如何创建一个带有行编辑功能的datagrid。

技术分享
 
创建DataGrid

 

Js代码  技术分享
  1. $(function() {  
  2.     $(‘#tt‘).datagrid({  
  3.         title: ‘Editable DataGrid‘,  
  4.         iconCls: ‘icon-edit‘,  
  5.         width: 660,  
  6.         height: 250,  
  7.         singleSelect: true,  
  8.         idField: ‘itemid‘,  
  9.         url: ‘datagrid_data.json‘,  
  10.         columns: [[{  
  11.             field: ‘itemid‘,  
  12.             title: ‘Item ID‘,  
  13.             width: 60  
  14.         },  
  15.         {  
  16.             field: ‘productid‘,  
  17.             title: ‘Product‘,  
  18.             width: 100,  
  19.             formatter: function(value) {  
  20.                 for (var i = 0; i < products.length; i++) {  
  21.                     if (products[i].productid == value) return products[i].name;  
  22.                 }  
  23.                 return value;  
  24.             },  
  25.             editor: {  
  26.                 type: ‘combobox‘,  
  27.                 options: {  
  28.                     valueField: ‘productid‘,  
  29.                     textField: ‘name‘,  
  30.                     data: products,  
  31.                     required: true  
  32.                 }  
  33.             }  
  34.         },  
  35.         {  
  36.             field: ‘listprice‘,  
  37.             title: ‘List Price‘,  
  38.             width: 80,  
  39.             align: ‘right‘,  
  40.             editor: {  
  41.                 type: ‘numberbox‘,  
  42.                 options: {  
  43.                     precision: 1  
  44.                 }  
  45.             }  
  46.         },  
  47.         {  
  48.             field: ‘unitcost‘,  
  49.             title: ‘Unit Cost‘,  
  50.             width: 80,  
  51.             align: ‘right‘,  
  52.             editor: ‘numberbox‘  
  53.         },  
  54.         {  
  55.             field: ‘attr1‘,  
  56.             title: ‘Attribute‘,  
  57.             width: 150,  
  58.             editor: ‘text‘  
  59.         },  
  60.         {  
  61.             field: ‘status‘,  
  62.             title: ‘Status‘,  
  63.             width: 50,  
  64.             align: ‘center‘,  
  65.             editor: {  
  66.                 type: ‘checkbox‘,  
  67.                 options: {  
  68.                     on: ‘P‘,  
  69.                     off: ‘‘  
  70.                 }  
  71.             }  
  72.         },  
  73.         {  
  74.             field: ‘action‘,  
  75.             title: ‘Action‘,  
  76.             width: 70,  
  77.             align: ‘center‘,  
  78.             formatter: function(value, row, index) {  
  79.                 if (row.editing) {  
  80.                     var s = ‘<a href="http://www.mamicode.com/#" onclick="saverow(this)">Save</a> ‘;  
  81.                     var c = ‘<a href="http://www.mamicode.com/#" onclick="cancelrow(this)">Cancel</a>‘;  
  82.                     return s + c;  
  83.                 } else {  
  84.                     var e = ‘<a href="http://www.mamicode.com/#" onclick="editrow(this)">Edit</a> ‘;  
  85.                     var d = ‘<a href="http://www.mamicode.com/#" onclick="deleterow(this)">Delete</a>‘;  
  86.                     return e + d;  
  87.                 }  
  88.             }  
  89.         }]],  
  90.         onBeforeEdit: function(index, row) {  
  91.             row.editing = true;  
  92.             updateActions(index);  
  93.         },  
  94.         onAfterEdit: function(index, row) {  
  95.             row.editing = false;  
  96.             updateActions(index);  
  97.         },  
  98.         onCancelEdit: function(index, row) {  
  99.             row.editing = false;  
  100.             updateActions(index);  
  101.         }  
  102.     });  
  103. });  
  104.   
  105. function updateActions(index) {  
  106.     $(‘#tt‘).datagrid(‘updateRow‘, {  
  107.         index: index,  
  108.         row: {}  
  109.     });  
  110. }  

 
为了让datagrid可编辑数据，要增加一个editor属性到列属性里，编辑器会告诉datagrid如何编辑字段和如何保存字段值，这里定义了三个editor：text、combobox和checkbox。

 

Js代码  技术分享
  1. function getRowIndex(target) {  
  2.     var tr = $(target).closest(‘tr.datagrid-row‘);  
  3.     return parseInt(tr.attr(‘datagrid-row-index‘));  
  4. }  
  5. function editrow(target) {  
  6.     $(‘#tt‘).datagrid(‘beginEdit‘, getRowIndex(target));  
  7. }  
  8. function deleterow(target) {  
  9.     $.messager.confirm(‘Confirm‘, ‘Are you sure?‘,  
  10.     function(r) {  
  11.         if (r) {  
  12.             $(‘#tt‘).datagrid(‘deleteRow‘, getRowIndex(target));  
  13.         }  
  14.     });  
  15. }  
  16. function saverow(target) {  
  17.     $(‘#tt‘).datagrid(‘endEdit‘, getRowIndex(target));  
  18. }  
  19. function cancelrow(target) {  
  20.     $(‘#tt‘).datagrid(‘cancelEdit‘, getRowIndex(target));  
  21. }  

 
11、扩展编辑器

一些通用编辑器被加入到datagrid中，用来允许用户编辑数据。所有编辑器在 $.fn.datagrid.defaults.editors对象中进行定义，被扩展来支持新编辑器。本教程教你如何增加一个新的numberspinner编辑器到datagrid中。

技术分享
 
扩展numberspinner编辑器

 

Js代码  技术分享
  1. $.extend($.fn.datagrid.defaults.editors, {  
  2.     numberspinner: {  
  3.         init: function(container, options) {  
  4.             var input = $(‘<input type="text">‘).appendTo(container);  
  5.             return input.numberspinner(options);  
  6.         },  
  7.         destroy: function(target) {  
  8.             $(target).numberspinner(‘destroy‘);  
  9.         },  
  10.         getValue: function(target) {  
  11.             return $(target).numberspinner(‘getValue‘);  
  12.         },  
  13.         setValue: function(target, value) {  
  14.             $(target).numberspinner(‘setValue‘, value);  
  15.         },  
  16.         resize: function(target, width) {  
  17.             $(target).numberspinner(‘resize‘, width);  
  18.         }  
  19.     }  
  20. });  

 
在html标识理创建DataGrid

 

Html代码  技术分享
  1. <table id="tt" style="width:600px;height:250px"  
  2. url="data/datagrid_data.json" title="Editable DataGrid" iconCls="icon-edit"  
  3. singleSelect="true" idField="itemid" fitColumns="true">  
  4.     <thead>  
  5.     <tr>  
  6.         <th field="itemid" width="60">Item ID</th>  
  7.         <th field="listprice" width="80" align="right" editor="{type:‘numberbox‘,options:{precision:1}}">List Price</th>  
  8.         <th field="unitcost" width="80" align="right" editor="numberspinner">Unit Cost</th>  
  9.         <th field="attr1" width="180" editor="text">Attribute</th>  
  10.         <th field="status" width="60" align="center" editor="{type:‘checkbox‘,options:{on:‘P‘,off:‘‘}}">Status</th>  
  11.         <th field="action" width="80" align="center" formatter="formatAction">Action</th>  
  12.     </tr>  
  13.     </thead>  
  14. </table>  

 指定numberspinner编辑器到“unit cost”字段，当启动编辑行，用户就可以利用numberspinner编辑器组件来编辑数据。

jQuery EasyUI教程之datagrid应用


联系
我们