正文 

当前位置： 首页 > java > java教程

jqueryeasyui教程之datagrid应用

芜明-追星 芜明-追星     2022-08-02     717

关键词：

一、利用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+" Price:"+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(‘ ‘));  

 

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编辑器组件来编辑数据。

jqueryeasyui之datagrid扩展

DataGrid通用合并扩展方法：$.extend($.fn.datagrid.methods,{autoMergeCells:function(jq,fields){returnjq.each(function(){vartarget=$(this);if(!fields){fields=target.datagrid("getColumnFields");}varrows=target.dat 查看详情

雷林鹏分享：jqueryeasyui应用-创建展开行明细编辑表单的crud应用

　　当切换数据网格视图(datagridview)到‘detailview‘，用户可以展开一行来显示一些行的明细在行下面。这个功能允许您为防止在明细行面板(panel)中的编辑表单(form)提供一些合适的布局(layout)。在本教程中，我们使用数据网格(datag... 查看详情

jqueryeasyui解决ie下datagrid无法刷新的问题

 问题描述： 在使用JqueryEasyUI时，发现在IE下$(‘#table‘).datagrid(‘reload‘);无效，数据并没有被刷新，究其原因，是因为刷新时，datagrid请求的url没有变化，IE就从浏览器缓存里取数据了，返回的是302响应码。 解决办法... 查看详情

jqueryeasyui中datagrid加载数据慢

参考技术A我今天也遇到了这样的问题，刚开始还以为是json错了，最后发现是加载数据量不能太大，我加载100条以上数据就觉得这个datagrid效率太差了，急求解决办法！ 参考技术B有说要把列宽固定，不要自适应去掉fitColumns:true或... 查看详情

jqueryeasyui怎么得到datagrid里面的值和传到后台

参考技术A您好：得到datagrid的数据有好几种。getData()Returntheloadeddata.getRows()Returnthecurrentpagerows.getFooterRows()Returnthefooterrows.getRowIndex()Returnthespecifiedrowindex,therowparametercanbearowrecordoranidfieldvalue.getChecked()Returnallrowswherethecheckboxhasbeenchecked... 查看详情

雷林鹏分享：jqueryeasyui数据网格-添加查询功能

　　jQueryEasyUI数据网格-添加查询功能　　本实例演示如何从数据库得到数据，并将它们显示在数据网格(datagrid)中。然后演示如何根据用户输入的搜索关键词搜寻显示结果。　　创建数据网格(DataGrid)　　创建带有分页功能的数据... 查看详情

jqueryeasyui的datagrid如何动态加载数据?

...官方文档：http://www.jeasyui.com/documentation/index.php#参考技术Ajqueryeasyui的输出都是json格式你只要按照他的要求动态输出就行datagrid每次是可以刷新的类似于刷新父窗体一样追问其实我是想动态设置其他属性的时候不会每次都去获取,... 查看详情

用户界面框架jqueryeasyui示例大全之链接按钮

<jQueryEasyUI最新试用版免费下载>jQueryEasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQueryEasyUI提供了基于当下流行的jQuerycore和HTML5的控件，助您打造适合当今网络的应用程序。基本链接按钮本演示主要... 查看详情

关于jqueryeasyui的datagrid组件,如何动态加载表头及其数据

希望写一段jquery代码,实现当后台发回不同的数据时,生成列的表头,同时加载出下面的列,后台数据请用json文件模拟//改变datagrid表头和数据 varchangeDatagrid=function(data) varfieldDataWrap=newArray(); varfieldData=newArray(); varf... 查看详情

jqueryeasyui里的datagrid删除行方法(deleterow)怎么用

$('#ss').datagrid('deleteRow',1);我删除index是1的行，但是不好使阿$('#dg').datagrid('deleteRow',x);其中x代表的是index，要删除的行的号码，第一行x便等于1.具体的请参考jQuery的Documentation，附上URL：http://www.jeasyui.com/docu... 查看详情

jqueryeasyui如何实现单击datagrid的某个格子，就可以直接编辑，离开后直接保存。

目前它的实现都是需要先选择某一行，然后再编辑，能不能直接点进去就可以编辑，希望有大神可以帮帮忙解决！详细一点更好。加一个单击事件，单击时就开启编辑模式参考技术A可以查看官方文档，http://www.jeasyui.com/demo/main/in... 查看详情

jqueryeasyui怎么得到datagrid里面的值和传到后台

varinsertRows=$('#test').datagrid('getChanges','inserted');\x0d\x0avarupdateRows=$('#test').datagrid('getChanges','updated');\x0d\x0avardeleteRows=$('#test').datagrid('getChanges','deleted');\x0d\... 查看详情

jqueryeasyui怎么得到datagrid里面的值和传到后台

varinsertRows=$('#test').datagrid('getChanges','inserted');\x0d\x0avarupdateRows=$('#test').datagrid('getChanges','updated');\x0d\x0avardeleteRows=$('#test').datagrid('getChanges','deleted');\x0d\... 查看详情

jqueryeasyui怎么得到datagrid里面的值和传到后台

varinsertRows=$('#test').datagrid('getChanges','inserted');\x0d\x0avarupdateRows=$('#test').datagrid('getChanges','updated');\x0d\x0avardeleteRows=$('#test').datagrid('getChanges','deleted');\x0d\... 查看详情

jqueryeasyui分页怎么刷新当前页

easyui对排序已经写好了的，你只要写上排序字段他会自动帮你排序，并且点击列名时会帮你用这个列排序的，是所有数据的，并不是针对当前页参考技术A这个可以用，亲测，由于刚研究，就不知其所以然。能用先用吧/*获取datagr... 查看详情

jqueryeasyui-datagrid使用从数据库查询得到数据显示在前台的jsp页面，如何实现？

最近刚学easyui，对于数据的填充，有所不明，使用MySQL数据库，使用easyui技术，编写考勤管理系统，进入页面后，显示数据库中当日的考勤记录，后台有数据，怎么显示在前台的主页上呢？1、首先写入导出按钮和需要导出的datagr... 查看详情

用jqueryeasyui写的一个datagrid,datagrid上面有"新增","编辑"按钮,点击按钮会弹出dialog对话框

但是现在在没有点击按钮的情况下,也有部分弹出对话框dialog中的下拉列表框显示出来了,怎样消除?刷新页面，点击一次“新增”按钮之后，成功打开对话框之后再关闭对话框，这时显示的下拉列表又消失了，重叠内容消失，页面... 查看详情

jqueryeasyui1.3.4的datagrid无法自适应高度和宽度,分页控件位置问题

为什么加入代码fit：true后，我的分页控件在那个对方，只显示出一半分页。。。参考技术A你没发现你的上面都有一道空白吗。你仔细找找tab里面是不是有什么地反搞了margin，或者padding。datagrid的地方也找找。追问什么叫反搞了m... 查看详情