• jQuery EasyUI教程之datagrid应用

    一、利用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="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="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="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="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="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="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="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="80px">  
    11.     To: <input class="easyui-datebox" style="80px">  
    12.     Language:   
    13.     <input class="easyui-combobox" style="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="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.      500,  
    5.     height: 250,  
    6.     url: 'data/datagrid_data.json',  
    7.     frozenColumns: [[{  
    8.         field: 'itemid',  
    9.         title: 'Item ID',  
    10.          80  
    11.     },  
    12.     {  
    13.         field: 'productid',  
    14.         title: 'Product ID',  
    15.          80  
    16.     },  
    17.     ]],  
    18.     columns: [[{  
    19.         field: 'listprice',  
    20.         title: 'List Price',  
    21.          80,  
    22.         align: 'right'  
    23.     },  
    24.     {  
    25.         field: 'unitcost',  
    26.         title: 'Unit Cost',  
    27.          80,  
    28.         align: 'right'  
    29.     },  
    30.     {  
    31.         field: 'attr1',  
    32.         title: 'Attribute',  
    33.          100  
    34.     },  
    35.     {  
    36.         field: 'status',  
    37.         title: 'Status',  
    38.          60  
    39.     }]]  
    40. });  

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

    Html代码  收藏代码
    1. <table id="tt" title="Frozen Columns" class="easyui-datagrid" style="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="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="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="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.          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.              60  
    14.         },  
    15.         {  
    16.             field: 'productid',  
    17.             title: 'Product',  
    18.              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.              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.              80,  
    51.             align: 'right',  
    52.             editor: 'numberbox'  
    53.         },  
    54.         {  
    55.             field: 'attr1',  
    56.             title: 'Attribute',  
    57.              150,  
    58.             editor: 'text'  
    59.         },  
    60.         {  
    61.             field: 'status',  
    62.             title: 'Status',  
    63.              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.              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="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编辑器组件来编辑数据。
  • 相关阅读:
    ubuntu(14.4) 安装phpmyadmin
    ubuntu(14.04) 安装ssh，并使用root用户登录
    ubuntu（14.04版本） 配置虚拟环境（一个ip对应多个域名）
    ubuntu 中数据的迁移
    ubuntu修改固定ip
    作业调度框架_Quartz
    tomcat设置端口号和默认webapp
    HTTP深入浅出 http请求
    HTTP协议详解
    如何准备阿里社招面试，顺谈 Java 程序员学习中各阶段的建议【转】
  • 原文地址：https://www.cnblogs.com/huangf714/p/5833628.html
Copyright © 2020-2023  润新知