jQuery EasyUI入门到精通（21）DataGrid（11）
1、Nested SubGrid（嵌套的子表格），Loading nested subgrid data（加载嵌套子表格数据）.C造婷用痃lick the expand button to expand row and view subgrid（点击扩展按钮用来扩展行以及显示子表格）.HTML基本结构如下：<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Loading nested subgrid data - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css"> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script></head><body> <h2>Loading nested subgrid data</h2> <p>Click the expand button to expand row and view subgrid.</p> <table id="dg"></table></body></html>
4、Large Data（大数据），Display large amount of data in DataGrid without pagination（在数据表格中显示大量数据但不使用分页）.HTML基本结构如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" content="easyui help you build your web page easily!"> <title>Display large amount of data in DataGrid without pagination - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><body> <h2>Display large amount of data in DataGrid without pagination</h2> <div class="demo-info" style="margin-bottom:10px"> <div class="demo-tip icon-tip"> </div> <div>Enter record count and press load button.</div> </div> <div style="margin-bottom:10px"> <span>Record Count:</span> <input id="total" class="easyui-numberbox" value="100" min="0" max="2000"> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="loaddata()">Load</a> </div> <table id="tt" style="width:700px;height:250px" url="datagrid25_getdata.php" singleSelect="true" title="Load Large Data" iconCls="icon-ok" autoRowHeight="false"> <thead> <tr> <th field="inv" width="80">Inv No</th> <th field="date" width="120">Date</th> <th field="name" width="80">Name</th> <th field="amount" width="80" align="right">Amount</th> <th field="price" width="80" align="right">Price</th> <th field="cost" width="100" align="right">Cost</th> <th field="note" width="130">Note</th> </tr> </thead> </table></body></html>
6、Display large amount of data in DataGrid without pagination（在数据表格中显示大量数据但不使用分页），运行效果如下图所示：
