浏览 7987 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-12-22
<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>Expand row in DataGrid to show subgrid - 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.4.4.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> <script type="text/javascript"> $(function () { $('#dg').datagrid({ view: detailview, detailFormatter: function (index, row) { return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>'; }, onExpandRow: function (index, row) { $('#ddv-' + index).datagrid({ url: 'http://www.jeasyui.com/tutorial/datagrid/datagrid22_getdetail.php?itemid=' + row.itemid, fitColumns: true, singleSelect: true, height: 'auto', columns: [[ { field: 'orderid', title: 'Order ID', width: 100 }, { field: 'quantity', title: 'Quantity', width: 100 }, { field: 'unitprice', title: 'Unit Price', width: 100 } ]], onResize: function () { $('#dg').datagrid('fixDetailRowHeight', index); }, onLoadSuccess: function () { setTimeout(function () { $('#dg').datagrid('fixDetailRowHeight', index); }, 0); }, view: detailview, detailFormatter: function (index2, row2) { return '<div style="padding:2px"><table id="ddv-' + index + '-' + index2 + '"></table></div>'; }, onExpandRow: function (index2, row2) { $('#ddv-' + index + '-' + index2).datagrid({ url: 'http://www.jeasyui.com/tutorial/datagrid/datagrid22_getdetail.php?itemid=' + row.itemid, fitColumns: true, singleSelect: true, height: 'auto', columns: [[ { field: 'orderid', title: 'Order ID', width: 100 }, { field: 'quantity', title: 'Quantity', width: 100 }, { field: 'unitprice', title: 'Unit Price', width: 100 } ]], onResize: function () { $('#ddv-' + index).datagrid('fixDetailRowHeight', index2); $('#ddv-' + index).datagrid('fixRowHeight'); $('#dg').datagrid('fixDetailRowHeight', index); $('#dg').datagrid('fixRowHeight'); }, onLoadSuccess: function () { setTimeout(function () { $('#ddv-' + index).datagrid('fixDetailRowHeight', index2); $('#dg').datagrid('fixDetailRowHeight', index); }, 0); } }); $.each($('#ddv-' + index).datagrid('getRows'), function (i, row) { $('#ddv-' + index).datagrid('fixRowHeight', i); }); $.each($('#dg').datagrid('getRows'), function (i, row) { $('#dg').datagrid('fixRowHeight', i); }); $('#ddv-' + index).datagrid('fixDetailRowHeight', index2); $('#dg').datagrid('fixDetailRowHeight', index); } }); $('#dg').datagrid('fixDetailRowHeight', index); } }); }); </script> </head> <body> <table id="dg" style="width: 1100px; height: 800px" url="http://www.jeasyui.com/tutorial/datagrid/datagrid22_getdata.php" title="DataGrid - SubGrid" singleselect="true" fitcolumns="true"> <thead> <tr> <th field="itemid" width="80"> Item ID </th> <th field="productid" width="100"> Product ID </th> <th field="listprice" align="right" width="80"> List Price </th> <th field="unitcost" align="right" width="80"> Unit Cost </th> <th field="attr1" width="220"> Attribute </th> <th field="status" width="60" align="center"> Status </th> </tr> </thead> </table> </body> </html> 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
