This weekend while experimenting with the javascript grid jqgrid, I decided to try out using a full grid as a subgrid.
Its really not that difficult given that the wiki on the jqgrid website shows how to do this. I just needed to tweak a few options to get it to work;
here is my code (php mysql back end):
1st, the html page
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;> <html> <head> <title>JQGrid Test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../dojoproject/jquery-ui-1.8.16.custom/css/start/jquery-ui-1.8.16.custom.css"> <link rel="stylesheet" type="text/css" href="jquery.jqGrid-4.3.1/css/ui.jqgrid.css"> <style type="text/css"> html, body { margin: 0; padding: 0; font-size: 90%; } </style> <script type="text/javascript" src="../dojoproject/jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js" ></script> <script type="text/javascript" src="../dojoproject/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js" ></script> <script type="text/javascript" src="jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js" ></script> <script type="text/javascript" src="jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js" ></script> <script type="text/javascript" src="../dojoproject/jqGrid-4.1.2/js/JSON-js/json2.js" ></script> <script> $(function() { $('#table').jqGrid({ jsonReader : { repeatitems: false, cell:"", id:"0" }, height:'auto', url:'/jqgrid/orders.php', datatype: 'json', mtype: 'GET', rownumbers:true, rownumWidth:35, colNames:['OrderID','CustomerID','EmployeeID','OrderDate','ShipVia','Freight','ShipName','ShipAddress'], colModel :[ {name:'OrderID', index:'OrderID',search:false,sorttype:'integer'}, {name:'CustomerID', index:'CustomerID'}, {name:'EmployeeID', index:'EmployeeID'}, {name:'OrderDate', index:'OrderDate'}, {name:'ShipVia', index:'ShipVia'}, {name:'Freight', index:'Freight'}, {name:'ShipName', index:'ShipName'}, {name:'ShipAddress', index:'ShipAddress'}, ], sortname: 'OrderID ', rowNum:10, sortorder: 'asc', width:'100%', height:'200', viewrecords: true, gridview: true, caption: 'NorthWind Orders', scrollOffset:18, multiselect:true, pager:'pager' ,cellEdit:true, cellsubmit:'clientArray', afterSaveCell:function(rowid, cellname, value, iRow, iCol){ }, subGrid:true, subGridRowExpanded: function(subgrid_id, row_id) { var subgrid_table_id; subgrid_table_id = subgrid_id+"_t"; $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>"); $("#"+subgrid_table_id).jqGrid({ jsonReader : { repeatitems: false, cell:"", id:"0" }, url:"order_details.php?id="+row_id, datatype: "json", colNames: ['OrderID','ProductID','UnitPrice','Quantity','Discount'], colModel: [ {name:"OrderID",index:"OrderID",width:80,}, {name:"ProductID",index:"ProductID",width:130}, {name:"UnitPrice",index:"UnitPrice",width:80,align:"right"}, {name:"Quantity",index:"Quantity",width:80,align:"right"}, {name:"Discount",index:"Discount",width:100,align:"right"} ], height: '100%', rowNum:20, }); } }); }); </script> </head> <body> <table id='table'></table> <div id='pager'></div> </body> </html>
Then, the orders.php
<?php header('Content-type: application/json'); Class jqGridObject { public $page; public $total; public $records; public $rows; } $page = $_GET['page']; $rows = $_GET['rows']; $arrayOrders = array(); $mysqli = new mysqli('localhost','root','','northwind'); if ($mysqli->connect_error) { die('Connect Error (' . $mysqli->connect_errno . ') ' . $mysqli->connect_error); }; $resultAll = $mysqli->query('select OrderID,CustomerID,EmployeeID,OrderDate,ShipVia,Freight,ShipName, ShipAddress from orders'); $records = $resultAll->num_rows; $total = ceil($records/$rows); $skip = $page*$rows - $rows; $queryLtd ='select OrderID,CustomerID,EmployeeID,OrderDate,ShipVia,Freight,ShipName, ShipAddress from orders LIMIT '.$skip.','.$rows; if (!$result = $mysqli->query($queryLtd)) { echo "error\n"; } else { while ($obj = $result->fetch_object()) { array_push($arrayOrders,$obj); }; $myjqGrid = new jqGridObject(); $myjqGrid->total = $total; $myjqGrid->page = $page; $myjqGrid->records = $records; $myjqGrid->rows = $arrayOrders; echo json_encode($myjqGrid); } ?>
Then order_details.php
<?php header('Content-type: application/json'); Class jqGridObject { public $page; public $total; public $records; public $rows; } $id = $_GET['id'] ; $rows = $_GET['rows']; $page = $_GET['page']; $arrayDetails = array(); $mysqli = new mysqli('localhost','root','','northwind'); if ($mysqli->connect_error) { die('Connect Error (' . $mysqli->connect_errno . ') ' . $mysqli->connect_error); }; $resultAll = $mysqli->query('select OrderID,ProductID,UnitPrice,Quantity,Discount from order_details where orderid = '.$id); $records = $resultAll->num_rows; $total = ceil($records/$rows); $skip = $page*$rows - $rows; $queryLtd = 'select OrderID,ProductID,UnitPrice,Quantity, Discount from order_details where orderid = '.$id.' LIMIT '.$skip.','.$rows; if (!$result = $mysqli->query($queryLtd)) { echo "error\n"; } else { while ($obj = $result->fetch_object()) { array_push($arrayDetails,$obj); } $myjqGrid = new jqGridObject(); $myjqGrid->total = $total; $myjqGrid->page = $page; $myjqGrid->page = $page; $myjqGrid->records = $records; $myjqGrid->rows = $arrayDetails; echo json_encode($myjqGrid); } ?> </div> <div> </div>