jQuery EasyUI教程之datagrid应用-2

 二、DataGrid的扩展应用

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

jQuery EasyUI教程之datagrid应用-2

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

  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可编辑

  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):

  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):

  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):

  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、增加分页

jQuery EasyUI教程之datagrid应用-2

创建DataGrid数据表格

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

  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会发送两个参数给服务器:

  1、page: 页码,从1开始。
  2、rows: 每页显示行数。

服务器端代码

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

2、增加搜索

jQuery EasyUI教程之datagrid应用-2

创建DataGrid

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

  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>

工具条定义为:

  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”函数将会被调用:

  1. function doSearch() {
  2. $('#tt').datagrid('load', {
  3. itemid: $('#itemid').val(),
  4. productid: $('#productid').val()
  5. });
  6. }

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

服务器端代码

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

3、获取选择行数据

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

jQuery EasyUI教程之datagrid应用-2

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

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

创建DataGrid

  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>

实例用法

获取单行数据:

  1. var row = $('#tt').datagrid('getSelected');
  2. if (row){
  3. alert('Item ID:'+row.itemid+"\nPrice:"+row.listprice);
  4. }

获取所有行itemid:

  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

jQuery EasyUI教程之datagrid应用-2

  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. <div id="tb">
  17. <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">Add</a>
  18. <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">Cut</a>
  19. <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">Save</a>
  20. </div>

5、复杂工具条

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

jQuery EasyUI教程之datagrid应用-2
 
创建Toolbar

  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

  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、冻结列

本示例演示如何冻结数据列,当用户水平滚动数据表格时,冻结的数据列不会滚动出视图界面外。
 
jQuery EasyUI教程之datagrid应用-2
 
通过定义frozenColumns属性来冻结列,冻结列属性的定义同列属性。

  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代码,如下面这样:

  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的话。
 
jQuery EasyUI教程之datagrid应用-2
 
为格式化一个DataGrid列,我们需要设置格式化属性,它是一个函数。格式化函数含有三个参数:

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

创建DataGrid

  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”属性,用来指明格式化函数。

编写格式化函数

  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数据。
 
jQuery EasyUI教程之datagrid应用-2
 
DataGrid中的全部列都可以排序,可以定义哪一个列进行排序。默认列属性不会进行排序,除非列的排序属性sortable设置为true。

创建DataGrid

  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”。

服务器端代码

  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. $result = array();
  7. include 'conn.php';
  8. $rs = mysql_query("select count(*) from item");
  9. $row = mysql_fetch_row($rs);
  10. $result["total"] = $row[0];
  11. $rs = mysql_query("select * from item order by $sort $order limit $offset,$rows");
  12. $items = array();
  13. while($row = mysql_fetch_object($rs)){
  14. array_push($items, $row);
  15. }
  16. $result["rows"] = $items;
  17. echo json_encode($result);

9、增加选择框

本教程教你如何放置一个checkbox 列到 DataGrid中。利用选择框用户可以即刻选择/取消所有表格数据行。
 
jQuery EasyUI教程之datagrid应用-2
 
为增加一个checkbox列,我们只需简单将checkbox属性设置为true即可。代码如下所示:

  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。

jQuery EasyUI教程之datagrid应用-2
 
创建DataGrid

  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. function updateActions(index) {
  105. $('#tt').datagrid('updateRow', {
  106. index: index,
  107. row: {}
  108. });
  109. }

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

  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中。

jQuery EasyUI教程之datagrid应用-2
 
扩展numberspinner编辑器

  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

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

上一篇:ios开发之--sizeToFit的用法


下一篇:CCIE路由实验(6) -- 组播Multicasting