Last active
January 11, 2023 18:52
-
-
Save gridphp/f81feac9df25ffee20238089343cd6fc to your computer and use it in GitHub Desktop.
Multiple Group Headers - https://www.gridphp.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* PHP Grid Component | |
* | |
* @author Abu Ghufran <gridphp@gmail.com> - http://www.phpgrid.org | |
* @version 2.0.0 | |
* @license: see license.txt included in package | |
*/ | |
// include db config | |
include_once("../../config.php"); | |
// include and create object | |
include(PHPGRID_LIBPATH."inc/jqgrid_dist.php"); | |
// Database config file to be passed in phpgrid constructor | |
$db_conf = array( | |
"type" => PHPGRID_DBTYPE, | |
"server" => PHPGRID_DBHOST, | |
"user" => PHPGRID_DBUSER, | |
"password" => PHPGRID_DBPASS, | |
"database" => PHPGRID_DBNAME | |
); | |
$g = new jqgrid($db_conf); | |
$grid["caption"] = "Group Headers"; // expand grid to screen width | |
$grid["width"] = "1200"; // expand grid to screen width | |
$grid["multiselect"] = true; // allow you to multi-select through checkboxes | |
// $grid["shrinkToFit"] = false; // dont shrink to fit on screen | |
$grid["sortable"] = false; // it is required for freezed column feature | |
$grid["height"] = "600"; | |
$grid["reloadedit"] = true; // auto reload after editing | |
$grid["resizable"] = true; | |
$grid["responsive"] = false; | |
$grid["responsive"] = false; | |
$grid["grouping"] = true; | |
$grid["groupingView"] = array(); | |
$grid["groupingView"]["groupField"] = array("gender","name"); // specify column name to group listing | |
$grid["groupingView"]["groupColumnShow"] = array(true,true); // either show grouped column in list or not (default: true) | |
$grid["groupingView"]["groupText"] = array("<b>{0} - {1} Item(s)</b>"); // {0} is grouped value, {1} is count in group | |
$grid["groupingView"]["groupOrder"] = array("asc"); // show group in asc or desc order | |
$grid["groupingView"]["groupDataSorted"] = array(true,true); // show sorted data within group | |
$grid["groupingView"]["groupSummary"] = array(false,false); // work with summaryType, summaryTpl, see column: $col["name"] = "total"; | |
$grid["groupingView"]["groupCollapse"] = false; // Turn true to show group collapse (default: false) | |
// to combine multiple records in same group | |
$grid["groupingView"]["isInTheSameGroup"] = array( | |
"function (x, y) { return String(x).toLowerCase() === String(y).toLowerCase(); }", | |
"function (x, y) { return String(x).toLowerCase() === String(y).toLowerCase(); }" | |
); | |
$grid["groupingView"]["formatDisplayField"] = array( | |
"function (displayValue, cm, index, grp) { return displayValue[0].toUpperCase() + displayValue.substring(1).toLowerCase(); }", | |
"function (displayValue, cm, index, grp) { return displayValue[0].toUpperCase() + displayValue.substring(1).toLowerCase(); }" | |
); | |
$g->set_options($grid); | |
$a_actions = array( | |
"add"=>false, | |
"edit"=>true, // allow/disallow edit | |
"delete"=>true, // allow/disallow delete | |
"view"=>false, | |
"rowactions"=>true, | |
//"search" => "advance", | |
//"showhidecolumns"=>true, // show/hide row wise edit/del/save option | |
"autofilter" => true, | |
"inline"=>true | |
); | |
$a_actions["inlineadd"] = false; | |
$a_actions["search"] = "advance"; | |
$a_actions["showhidecolumns"] = true; | |
$g->set_actions($a_actions); | |
$g->select_command = "SELECT invheader.id, clients.client_id, name, gender, company FROM clients | |
LEFT JOIN invheader on invheader.client_id = clients.client_id | |
"; | |
// this db table will be used for add,edit,delete | |
$g->table = "clients"; | |
$col = array(); | |
$col["title"] = "Id"; | |
$col["name"] = "client_id"; | |
$col["dbname"] = "clients.client_id"; | |
$col["width"] = "200"; | |
$col["editable"] = false; | |
$cols[] = $col; | |
$col = array(); | |
$col["title"] = "Name"; | |
$col["name"] = "name"; | |
$col["formatter"] = "function(cellvalue, options, rowObject){ return '<span title=\"'+rowObject.company+'\">'+cellvalue+'</span>'; }"; | |
$col["unformat"] = "function(cellvalue, options, rowObject){ return $.jgrid.stripHtml(cellvalue); }"; | |
$col["editable"] = true; | |
$col["width"] = "80"; | |
$col["editoptions"] = array("size"=>20); | |
$cols[] = $col; | |
$col = array(); | |
$col["title"] = "Gender"; | |
$col["name"] = "gender"; | |
$col["width"] = "300"; | |
$col["editable"] = true; | |
$col["editoptions"]["onfocus"] = "$(this).parent().css('backgroundColor','green')"; | |
$col["editoptions"]["onblur"] = "$(this).parent().css('backgroundColor','inherit')"; | |
$cols[] = $col; | |
$col = array(); | |
$col["title"] = "Company"; | |
$col["name"] = "company"; | |
$col["editable"] = true; | |
$col["edittype"] = "textarea"; | |
$col["editoptions"] = array("rows"=>2, "cols"=>20); | |
$cols[] = $col; | |
$col = array(); | |
$col["title"] = "Code"; | |
$col["name"] = "code"; | |
$col["width"] = "400"; | |
$col["editable"] = true; | |
$cols[] = $col; | |
$g->set_columns($cols); | |
// group columns header | |
$g->set_group_header( array( | |
"useColSpanStyle"=>false, | |
"groupHeaders"=>array( | |
array( | |
"startColumnName"=>'name', // group starts from this column | |
"numberOfColumns"=>2, // group span to next 2 columns | |
"titleText"=>'Before' // caption of group header | |
) | |
,array( | |
"startColumnName"=>'company', // group starts from this column | |
"numberOfColumns"=>2, // group span to next 2 columns | |
"titleText"=>'All Information' // caption of group header | |
), | |
array( | |
"startColumnName"=>'act', // group starts from this column | |
"numberOfColumns"=>2, // group span to next 2 columns | |
"titleText"=>'After' // caption of group header | |
), | |
) | |
) | |
); | |
// group columns header | |
$g->set_group_header( array( | |
"useColSpanStyle"=>false, | |
"groupHeaders"=>array( | |
array( | |
"startColumnName"=>'name', // group starts from this column | |
"numberOfColumns"=>2, // group span to next 2 columns | |
"titleText"=>'Personal Information' // caption of group header | |
), | |
array( | |
"startColumnName"=>'company', // group starts from this column | |
"numberOfColumns"=>2, // group span to next 2 columns | |
"titleText"=>'Company Details' // caption of group header | |
) | |
) | |
) | |
); | |
// generate grid output, with unique grid name as 'list1' | |
$out = $g->render("list1"); | |
?> | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | |
<html> | |
<head> | |
<link rel="stylesheet" type="text/css" media="screen" href="../../lib/js/themes/redmond/jquery-ui.custom.css"></link> | |
<link rel="stylesheet" type="text/css" media="screen" href="../../lib/js/jqgrid/css/ui.jqgrid.css"></link> | |
<script src="../../lib/js/jquery.min.js" type="text/javascript"></script> | |
<script src="../../lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script> | |
<script src="../../lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> | |
<script src="../../lib/js/themes/jquery-ui.custom.min.js" type="text/javascript"></script> | |
</head> | |
<body> | |
<style> | |
/* fix for freeze column div position */ | |
.ui-jqgrid .editable {margin: 0px !important;} | |
</style> | |
<script> | |
</script> | |
<div style="margin:10px"> | |
<?php echo $out?> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment