Subgrid, Content

View Code

	

	<div id="page" data-role="page" data-theme="b">
    ...
		<table id='grid'></table>
		<div id='pager'></div>

		
		<script type='text/javascript'>
			jQuery('#grid').jqGrid({
				"width":"650",
				"hoverrows":false,
				"viewrecords":true,
				"jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},
				"gridview":false,
				"url":"datacustom.json",
				"rowNum":10,
				"height":200,
				"rowList":[10,20,30],
				"subGridWidth":70,
				"sortname":"EmployeeID",
				"subGrid":true,
				"subGridRowExpanded":function(subgridid,id)	{
					var data = {subgrid:subgridid, rowid:id};
					$("#"+jQuery.jgrid.jqID(subgridid)).load('custom_detail.php',data);
				},
				"datatype":"json",
				"colModel":[
					{"name":"EmployeeID","index":"EmployeeID","sorttype":"int","key":true,"editable":true},
					{"name":"LastName","index":"LastName","sorttype":"string","editable":true},
					{"name":"FirstName","index":"FirstName","sorttype":"string","editable":true},
					{"name":"Title","index":"Title","sorttype":"string","editable":true}
				],
				"prmNames":{"subgrid":"subgrid"},
				"loadError":function(xhr,status, err){ 
					try {
						jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap,'
'+ xhr.responseText +'
', jQuery.jgrid.edit.bClose,{buttonalign:'right'});
					} catch(e) { 
						alert(xhr.responseText);
					} 
				},
				"pager":"#pager"
			});		
		...
		</script>
	</div>

	PHP CODE (custom_detail.php)
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");

$rowid = $_POST["rowid"];
if(!$rowid) die("Missed parameters");
// Get details
$SQL = "SELECT * FROM employees WHERE EmployeeID=".(int)$rowid;

$qres = $conn->query($SQL);

$result = $qres->fetch( PDO::FETCH_ASSOC);
$s = "<table><tbody>";
$s .= "<tr><td><b>First Name</b><td>".$result["FirstName"]."</td>";
$s .= "<td rowspan='9' valign='top'><img src='images/".trim($rowid).".jpg'/></td></tr>";
$s .= "<tr><td><b>Last Name</b></td><td>".$result["LastName"]."</td></tr>";
$s .= "<tr><td><b>Title</b></td><td>".$result["Title"]."</td></tr>";
$s .= "<tr><td><b>Title of Courtesy</b></td><td>".$result["TitleOfCourtesy"]."</td></tr>";
$s .= "<tr><td><b>Birth Date</b></td><td>".$result["BirthDate"]."</td></tr>";
$s .= "<tr><td><b>Hire Date</b></td><td>".$result["HireDate"]."</td></tr>";
$s .= "<tr><td><b>Address</b></td><td>".$result["Address"]."</td></tr>";
$s .= "<tr><td><b>City</b></td><td>".$result["City"]."</td></tr>";
$s .= "<tr><td><b>Postal Code</b></td><td>".$result["PostalCode"]."</td></tr>";
$s .= "</tbody></table>";
echo $s;