easyUI Datagrid expand row

最新推荐文章于 2023-05-05 08:41:59 发布

cserw3c

最新推荐文章于 2023-05-05 08:41:59 发布

阅读量1.1k

点赞数

分类专栏： EasyUI 文章标签： easyUi expandRow

本文链接：https://blog.csdn.net/wdd304159787/article/details/84708196

版权

EasyUI 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Expand row in DataGrid to show subgrid

<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>
</head>
<body>
	<h2>Expand row in DataGrid to show subgrid</h2>
	<div class="demo-info" style="margin-bottom: 10px">
		<div class="demo-tip icon-tip">&nbsp;</div>
		<div>Click the expand button to expand row and view subgrid.</div>
	</div>
	<table id="dg" style="width: 650px; height: 250px"
		url="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>
	<script type="text/javascript">
		$(function() {
			$('#dg')
					.datagrid(
							{
								view : detailview,
								detailFormatter : function(index, row) {
									return '<div style="padding:2px"><table class="ddv"></table></div>';
								},
								onExpandRow : function(index, row) {
									var ddv = $(this).datagrid('getRowDetail',
											index).find('table.ddv');
									ddv
											.datagrid({
												url : 'datagrid22_getdetail.php?itemid='
														+ row.itemid,
												fitColumns : true,
												singleSelect : true,
												rownumbers : true,
												loadMsg : '',
												height : 'auto',
												columns : [ [ {
													field : 'orderid',
													title : 'Order ID',
													width : 200
												}, {
													field : 'quantity',
													title : 'Quantity',
													width : 100,
													align : 'right'
												}, {
													field : 'unitprice',
													title : 'Unit Price',
													width : 100,
													align : 'right'
												} ] ],
												onResize : function() {
													$('#dg')
															.datagrid(
																	'fixDetailRowHeight',
																	index);
												},
												onLoadSuccess : function() {
													setTimeout(
															function() {
																$('#dg')
																		.datagrid(
																				'fixDetailRowHeight',
																				index);
															}, 0);
												}
											});
									$('#dg').datagrid('fixDetailRowHeight',
											index);
								}
							});
		});
	</script>
</body>
</html>

cserw3c

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyUI Datagrid expand row

Expand row in DataGrid to show subgrid &lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;&lt;meta name="keywords" content="jquery,u
复制链接

扫一扫

专栏目录