The tabbed datagrid implementation has been simplified and improved to use a separate loader (tabbed_grid_loader.php) in which the table names are whitelisted. The table whitelist ensures only the specific database tables are allowed to be viewed.
We can use jQuery UI Tabs widget to build our datagrid with tabs. phpGrid already comes with the latest jQuery UI library.
First of all, let’s create our tabs. Each tab is a hyperlink with querystring to a database table name.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="tabs"> <ul> <li><a href="#tabs-1">Orders</a></li> <li><a href="?gn=employees">Employees</a></li> <li><a href="?gn=products">Products</a></li> <li><a href="?gn=customers">Customers</a></li> <li><a href="?gn=suppliers">Suppliers</a></li> </ul> <div id="tabs-1" style="padding:0"> PLACEHOLDER - PHPGRID GOES HERE </div> </div> |
Apply jQuery UI Tabs function to transform the above HTML to tabs.
1 2 3 4 5 6 7 8 9 10 11 12 | $( function() { $( "#tabs" ).tabs({ beforeLoad: function(event, ui) { if(ui.panel.html() == ""){ ui.panel.html('<div class="loading">Loading...</div>'); return true; } else { return false; } } }); } ); |
The next step is to add the phpGrid code. The first tab will load from the “orders” database table. Note that the grid is not immediately displayed but delayed the render later inside the tab element.
We also didn’t include the primary key and table name in C_DataGrid construtor because we would like make the script as dynamic as possible. phpGrid will try to parse out the table name and primary key automatically (only supported in phpGrid Enterprise 6.9+).
1 2 3 4 5 6 7 8 9 10 11 12 | // Always include namespace and conf.php on TOP of the script. use phpCtrl\C_DataGrid; require_once("/path/to/conf.php"); $tableName = (isset($_GET['gn']) && isset($_GET['gn']) !== '') ? $_GET['gn'] : 'orders'; $dg = new C_DataGrid("SELECT * FROM ". $tableName); $dg->enable_edit()->set_dimension('1100'); $dg -> display(false); $grid = $dg -> get_display(false); $dg -> display_script_includeonce(); |
Update the tabs HTML to display the datagrid.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="tabs"> <ul> <li><a href="#tabs-1">Orders</a></li> <li><a href="tabbed_grid_loader.php?gn=employees">Employees</a></li> <li><a href="tabbed_grid_loader.php?gn=products">Products</a></li> <li><a href="tabbed_grid_loader.php?gn=customers">Customers</a></li> <li><a href="tabbed_grid_loader.php?gn=suppliers">Suppliers</a></li> </ul> <div id="tabs-1" style="padding:0"> <?php echo $grid; ?> </div> </div> |
Finally, we tweak UI by adding CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .loading { position: fixed; top: 350px; left: 50%; margin-top: -96px; margin-left: -96px; opacity: .85; border-radius: 25px; width: 50px; height: 50px; } #tabs ul{ width:1093px; } .ui-tabs-panel.ui-widget-content.ui-corner-bottom{ padding:0; } |
Our loader script: tabbed_grid_loader.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?php // companion loader file for tabbed_grid.php (Tabbed datagrid) use phpCtrl\C_DataGrid; require_once("/file/path/to/conf.php"); $tableName = (isset($_GET['gn']) && isset($_GET['gn']) !== '') ? $_GET['gn'] : 'orders'; // SECURITY CHECK $tablesWhitelist = array('employees', 'products', 'customers', 'suppliers', 'orders'); if(!in_array($tableName, $tablesWhitelist)) die("The table $tableName is not whitelisted."); $dg = new C_DataGrid("SELECT * FROM ". $tableName); $dg->enable_edit()->set_dimension('1100'); $dg -> display(); |
That’s all there is to it!