jQuery EasyUI从入门到精通（11）DataGrid（1）
1、Basic DataGrid（基础数据釉涑杵抑表格），The DataGrid is created from markup, no JavaScript code needed（该数据表格通过标记创建，而不要Javascript代码）.<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Basic DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script></head><body> <h2>Basic DataGrid</h2> <p>The DataGrid is created from markup, no JavaScript code needed.</p> <div style="margin:20px 0;"></div> <table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px" data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'"> <thead> <tr> <th data-options="field:'itemid',width:80">Item ID</th> <th data-options="field:'productid',width:100">Product</th> <th data-options="field:'listprice',width:80,align:'right'">List Price</th> <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th> <th data-options="field:'attr1',width:250">Attribute</th> <th data-options="field:'status',width:60,align:'center'">Status</th> </tr> </thead> </table></body></html>
2、Basic DataGrid（基础数据表格），运行效果如下图所示。
3、Transform DataGrid from Table（数据表格的变换釉涑杵抑表），Transform DataGrid from an existi荏鱿胫协ng, unformatted html table.<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Transform DataGrid from Table - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script></head><body> <h2>Transform DataGrid from Table</h2> <p>Transform DataGrid from an existing, unformatted html table.</p> <div style="margin:20px 0;"> <a href="#" class="easyui-linkbutton" onclick="javascript:$('#dg').datagrid()">Transform</a> </div> <table id="dg" style="width:700px;height:auto;border:1px solid #ccc;"> <thead> <tr> <th data-options="field:'itemid'">Item ID</th> <th data-options="field:'productid'">Product</th> <th data-options="field:'listprice',align:'right'">List Price</th> <th data-options="field:'attr1'">Attribute</th> </tr> </thead> <tbody> <tr> <td>EST-1</td><td>FI-SW-01</td><td>36.50</td><td>Large</td> </tr> <tr> <td>EST-10</td><td>K9-DL-01</td><td>18.50</td><td>Spotted Adult Female</td> </tr> <tr> <td>EST-11</td><td>RP-SN-01</td><td>28.50</td><td>Venomless</td> </tr> <tr> <td>EST-12</td><td>RP-SN-01</td><td>26.50</td><td>Rattleless</td> </tr> <tr> <td>EST-13</td><td>RP-LI-02</td><td>35.50</td><td>Green Adult</td> </tr> </tbody> </table></body></html>
4、Transform DataGrid from Table（数据表格的变换表），转换前，如下图所示。
5、Transform DataGrid from Table（数据表格的变换表），转换后，效果如下图所示。
6、Row Border in DataGrid（数据表格的行边距），Th坡纠课柩is sample shows how to 艘早祓胂change the row border style of datagrid（这个例子展示了如何改变行数据表格的行边框样式）.<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Row Border in DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script></head><body> <h2>Row Border in DataGrid</h2> <p>This sample shows how to change the row border style of datagrid.</p> <div style="margin:20px 0;"> <span>Border:</span> <select onchange="changeBorder(this.value)"> <option value="lines-both">Both</option> <option value="lines-no">No Border</option> <option value="lines-right">Right Border</option> <option value="lines-bottom">Bottom Border</option> </select> <span>Striped:</span> <input type="checkbox" onclick="$('#dg').datagrid({striped:$(this).is(':checked')})"> </div> <table id="dg" class="easyui-datagrid" title="Row Border in DataGrid" style="width:700px;height:250px" data-options="singleSelect:true,fitColumns:true,url:'datagrid_data1.json',method:'get'"> <thead> <tr> <th data-options="field:'itemid',width:80">Item ID</th> <th data-options="field:'productid',width:100">Product</th> <th data-options="field:'listprice',width:80,align:'right'">List Price</th> <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th> <th data-options="field:'attr1',width:250">Attribute</th> <th data-options="field:'status',width:60,align:'center'">Status</th> </tr> </thead> </table> <script type="text/javascript"> function changeBorder(cls){ $('#dg').datagrid('getPanel').removeClass('lines-both lines-no lines-right lines-bottom').addClass(cls); } </script> <style type="text/css"> .lines-both .datagrid-body td{ } .lines-no .datagrid-body td{ border-right:1px dotted transparent; border-bottom:1px dotted transparent; } .lines-right .datagrid-body td{ border-bottom:1px dotted transparent; } .lines-bottom .datagrid-body td{ border-right:1px dotted transparent; } </style> </body></html>
7、Row Border in DataGrid（数据表格的行边距），运行效果如下图所示。
