jQuery EasyUI教程之datagrid应用

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>  

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

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>  

1. function newUser(){  
2.     $('#dlg').dialog('open').dialog('setTitle','New User');  
3.     $('#fm').form('clear');  
4.     url = 'save_user.php';  
5. }  

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. }  

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. }  

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. }  

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>  

1. $('#dg').edatagrid({  
2.     url: 'get_users.php',  
3.     saveUrl: 'save_user.php',  
4.     updateUrl: 'update_user.php',  
5.     destroyUrl: 'destroy_user.php'  
6. });  

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. ));  

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. ));  

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

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>  

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

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>  

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>  

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

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

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>  

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

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(' '));  

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>  

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>  

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>  

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. });  

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>  

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>  

1. function formatPrice(val,row){  
2.     if (val < 20){  
3.     return '<span style="color:red;">('+val+')</span>';  
4.     } else {  
5.     return val;  
6.     }  
7. }  

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>  

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

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>  

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="http://t.zoukankan.com/lmy01-p-6400839.html#" onclick="saverow(this)">Save</a> ';  
81.                     var c = '<a href="http://t.zoukankan.com/lmy01-p-6400839.html#" onclick="cancelrow(this)">Cancel</a>';  
82.                     return s + c;  
83.                 } else {  
84.                     var e = '<a href="http://t.zoukankan.com/lmy01-p-6400839.html#" onclick="editrow(this)">Edit</a> ';  
85.                     var d = '<a href="http://t.zoukankan.com/lmy01-p-6400839.html#" 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. }  

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. }  

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. });  

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>  

一、利用jQuery EasyUI的DataGrid创建CRUD应用

    对网页应用程序来说，正确采集和管理数据通常很有必要，DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录。本教程将教会你如何运用jQuery EasyUI框架来实现DataGrid的CRUD功能 。

我们会用到如下插件:

· datagrid: 列表显示数据。

· dialog: 增加或编辑单个用户信息。

· form: 用来提交表单数据。

· messager: 用来显示操作信息。

第一步：准备数据库

使用MySql数据库来保存用户信息，并创建数据库和“users”表。

第二步：创建DataGrid数据表格来显示用户信息

不需要编写任何javascript代码创建DataGrid数据表格。

如下图所示，我们不需要写任何一行javascript代码:

DataGrid使用“url”属性来指定“get_users.php”，用来从服务器端接收数据。

get_users.php代码文件：

第三步：创建表单对话框

增加或者编辑用户信息，我们使用同一对话框。

对话框的创建也不需要编写javascript代码。
 

第四步：实现增加和编辑用户功能

增加用户信息时，打开对话框，清除表单数据。

编辑用户信息时，打开对话框，将选择的数据表格行数据装入表单。

“url”保存URL地址，当保存用户数据时，表单用它来提交（post）数据到服务器。

第五步：保存用户数据

使用如下代码来保存用户数据：

提交表单前，“onSubmit”函数被调用，此时可校验表单字段值。当表单字段值提交成功，关闭对话框和刷新数据表格数据。

第六步：删除用户

用如下代码来删除用户：

删除一行数据时，会弹出一个confirm对话框来让我们选择确定是否真的删除数据行。当删除数据成功，调用“reload”方法刷新datagrid数据。

二、DataGrid的扩展应用

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

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

第二步：使DataGrid可编辑 

为可编辑的datagrid提供了“url”、“saveUrl”、“updateUrl”、“destroyUrl”属性：

url: 从服务器端接收用户数据。
saveUrl: 保存新用户数据。
updateUrl: 更新现有用户数据。
destroyUrl: 删除现有用户数据。

第三步：编写服务器端处理代码

保存新用户（save_user.php）：

更新现有用户（update_user.php）：

删除现有用户（destroy_user.php）：

edatagrid属性

edatagrid的属性从datagrid属性中扩展，下面为edatagrid增加的属性：

edatagrid事件

从datagrid扩展，下面为edatagrid增加的事件：

edatagrid方法

从datagrid中扩展，下面是为edatagrid增加或重写的方法：

三、设定或定制各种功能

1、增加分页

创建DataGrid数据表格

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

 定义datagrid列，将“pagination”属性设为true，将会在datagrid底部生成一个分页工具条。 pagination会发送两个参数给服务器：

　　１、page: 页码，从1开始。
　　２、rows: 每页显示行数。

服务器端代码

 
2、增加搜索

创建DataGrid

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

 工具条定义为：

 用户输入搜索值，然后点击搜索按钮，“doSearch”函数将会被调用：

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

服务器端代码

3、获取选择行数据

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

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

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

创建DataGrid

实例用法

获取单行数据：

 获取所有行itemid：

4、增加工具条

本示例教你如何增加一个工具条到datagrid中。
 
创建DataGrid


 

5、复杂工具条

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


 
创建Toolbar

创建DataGrid

6、冻结列

本示例演示如何冻结数据列，当用户水平滚动数据表格时，冻结的数据列不会滚动出视图界面外。
 

 
通过定义frozenColumns属性来冻结列，冻结列属性的定义同列属性。

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

7、格式化数据列

下面为EasyUI DataGrid里的格式化列示例，用一个定制的列格式化器（formatter）来将文本标注为红色，如果价格低于20的话。
 

 
为格式化一个DataGrid列，我们需要设置格式化属性，它是一个函数。格式化函数含有三个参数：

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

创建DataGrid

 注意：“listprice”字段有一个“formatter”属性，用来指明格式化函数。

编写格式化函数

8、增加排序功能

本示例演示如何通过点击列表头来排序DataGrid数据。
 

 
DataGrid中的全部列都可以排序，可以定义哪一个列进行排序。默认列属性不会进行排序，除非列的排序属性sortable设置为true。

创建DataGrid

 定义了可排序的列为：itemid、productid、listprice、unitcost等。“attr1”列和“status”列不能排序。
DataGrid的排序会发送两个参数给服务器：

• sort: 排序列字段名。
• order: 排序方式，可以是“asc（升序）”或“desc（降序）”,默认为“asc”。

服务器端代码

9、增加选择框

本教程教你如何放置一个checkbox 列到 DataGrid中。利用选择框用户可以即刻选择/取消所有表格数据行。
 

 
为增加一个checkbox列，我们只需简单将checkbox属性设置为true即可。代码如下所示：

 上面的代码增加了一个含有checkbox属性的列，从而生成了一个选择框列。如果idField属性被设置，DataGrid的已选行在不同的页面里都可以维持。

10、增强行内编辑

Datagrid最近增加了一个可编辑功能，它使用户可增加新行到datagrid中，用户也可对单行或多行数据进行更新。
本教程教你如何创建一个带有行编辑功能的datagrid。


 
创建DataGrid

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

 
11、扩展编辑器

一些通用编辑器被加入到datagrid中，用来允许用户编辑数据。所有编辑器在 $.fn.datagrid.defaults.editors对象中进行定义，被扩展来支持新编辑器。本教程教你如何增加一个新的numberspinner编辑器到datagrid中。


 
扩展numberspinner编辑器

 
在html标识理创建DataGrid