jQuery EasyUI教程之datagrid应用

三、设定或定制各种功能

 

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

posted @ 2015-06-25 11:10  浮山山主  阅读(532)  评论(0)  编辑  收藏  举报