碼上歡樂
相關內容    簡體    繁體

jQuery EasyUI教程之datagrid應用

本文轉載自   查看原文   2016-09-02 15:19   2493    jQuery EasyUI教程之datagrid應用/ EasyUI

一、利用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="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>  
  16.     <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>  
  17.     <a href="#" 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="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>  
  24.     <a href="#" 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="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>  
  15.     <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>  
  16.     <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>  
  17.     <a href="#" 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="#" 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="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>  
  19.     <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">Cut</a>  
  20.     <a href="#" 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="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>  
  4.     <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>  
  5.     <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>  
  6.     <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>  
  7.     <a href="#" 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="#" 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="#" onclick="saverow(this)">Save</a> ';  
  81.                     var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';  
  82.                     return s + c;  
  83.                 } else {  
  84.                     var e = '<a href="#" onclick="editrow(this)">Edit</a> ';  
  85.                     var d = '<a href="#" 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編輯器組件來編輯數據。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Jquery EasyUI Datagrid的使用 jquery easyui datagrid 分頁 詳解 Jquery EasyUI DataGrid .net實例 jQuery EasyUI DataGrid 分頁 FOR ASP.NET JQuery EasyUI的datagrid的使用方式總結 jQuery EasyUI DataGrid API 中文文檔 jQuery EasyUI DataGrid Checkbox 數據設定與取值 JQuery EasyUI DataGrid獲取當前行 Jquery easyui datagrid 刪除多行問題 jQuery EasyUI的各歷史版本和應用
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM