jQuery EasyUI Data Grid - Extended rows display details

jQuery EasyUI Data Grid - Extended rows show details

This section describes how jQuery EasyUI Datagrid displays the details of rows in the grid through detailed views.

The data grid can change its view to show different effects. U sing a detailed view, the data grid can display an expand button ("plus" or "-") on the left side of the data row. B y expanding the button, the user can expand the row to display additional details.

Step 1: Create a DataGrid

	<table id="dg" style="width:500px;height:250px" url="datagrid8_getdata.php" pagination="true" sortName="itemid" sortOrder="desc" 			title="DataGrid - Expand Row" singleSelect="true" fitColumns="true">
		<thead>
			<tr>
				<th field="itemid" width="60">Item ID</th>
				<th field="productid" width="80">Product ID</th>
				<th field="listprice" align="right" width="70">List Price</th>
				<th field="unitcost" align="right" width="70">Unit Cost</th>
				<th field="status" width="50" align="center">Status</th>
			</tr>
		</thead>
	</table>

Step 2: Set up a detailed view of the data grid

To use a detailed view, remember to refer to the view script file at the head of the page.

<script type="text/javascript" src="//www.w3cschool.cn/try/jeasyui/datagrid-detailview.js"></script>

$('#dg').datagrid({
	view: detailview,
	detailFormatter:function(index,row){
		return '<div class="ddv" style="padding:5px 0"></div>';
	},
	onExpandRow: function(index,row){
		var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
		ddv.panel({
			border:false,
			cache:false,
			href:'datagrid21_getdetail.php?itemid='+row.itemid,
			onLoad:function(){
				$('#dg').datagrid('fixDetailRowHeight',index);
			}
		});
		$('#dg').datagrid('fixDetailRowHeight',index);
	}
});

We define the 'detailFormatter' function, which tells the data grid how to render a detailed view. I n this case, we return a simple 'lt;div'' element, which acts as a container for the details. N ote that the details are empty. T he onExpandRow event is triggered when the user clicks the expand button . S o we can write some code to load the ajax details. F inally, we call the 'fixDetail RowHeight' method to pin the line height when the details load.

Step 3: Server-side code

<?php
	include_once 'conn.php';

	$itemid = mysql_real_escape_string($_REQUEST['itemid']);

	$rs = mysql_query("select * from item where itemid='$itemid'");
	$item = mysql_fetch_array($rs);
?>

<table class="dv-table" border="0" style="width:100%;">
	<tr>
		<td rowspan="3" style="width:60px">
			&lt;?php
				$aa = explode('-',$itemid);
				$serno = $aa[1];
				$img = "images/shirt$serno.gif";
				echo "<img src=\"$img\" style=\"width:60px;margin-right:20px\" />";
			?&gt;
		</td>
		<td class="dv-label">Item ID: </td>
		<td>&lt;?php echo $item['itemid'];?&gt;</td>
		<td class="dv-label">Product ID:</td>
		<td>&lt;?php echo $item['productid'];?&gt;</td>
	</tr>
	<tr>
		<td class="dv-label">List Price: </td>
		<td>&lt;?php echo $item['listprice'];?&gt;</td>
		<td class="dv-label">Unit Cost:</td>
		<td>&lt;?php echo $item['unitcost'];?&gt;</td>
	</tr>
	<tr>
		<td class="dv-label">Attribute: </td>
		<td colspan="3">&lt;?php echo $item['attr1'];?&gt;</td>
	</tr>
</table>

Download the jQuery EasyUI instance

jeasyui-datagrid-datagrid21.zip