Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using with jquery 3.3.1
<?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_once("../../config.php");
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();
$opt["caption"] = "Dairy Products";
$opt["responsive"] = true;
$opt["globalsearch"] = true;
$opt["altRows"] = true;
$opt["rowNum"] = 20;
$opt["rowheight"] = 30;
$opt["add_options"]["width"] = "500";
$opt["edit_options"]["width"] = "500";
$opt["view_options"]["width"] = "500";
$opt["height"] = "100%";
$opt["subGrid"] = true;
$opt["subgridurl"] = "index_detail.php";
// $opt["readonly"] = true;
// grouping
$opt["grouping"] = true;
$opt["groupingView"] = array();
$opt["groupingView"]["groupField"] = array("company_name"); // specify column name to group listing
$opt["groupingView"]["groupColumnShow"] = array(true); // either show grouped column in list or not (default: true)
$opt["groupingView"]["groupText"] = array("<b>{0} - {1} Products(s)</b>"); // {0} is grouped value, {1} is count in group
$opt["groupingView"]["groupOrder"] = array("desc"); // show group in asc or desc order
$opt["groupingView"]["groupDataSorted"] = array(true); // show sorted data within group
$opt["groupingView"]["groupSummary"] = array(false); // work with summaryType, summaryTpl, see column: $col["name"] = "total"; (if false, set showSummaryOnHide to false)
$opt["groupingView"]["groupCollapse"] = false; // Turn true to show group collapse (default: false)
$opt["groupingView"]["showSummaryOnHide"] = false; // show summary row even if group collapsed (hide)
$opt["loadComplete"] = "function(){ load(); }";
// Define predefined search templates
$opt["search_options"]["tmplNames"] = array("Choco Products","Price > 10");
$opt["search_options"]["tmplFilters"] = array(
array(
"groupOp" => "AND",
"rules" => array (
array("field"=>"product_name", "op"=>"cn", "data"=>"Choc")
)
),
array(
"groupOp" => "AND",
"rules" => array (
array("field"=>"unit_price", "op"=>"gt", "data"=>"10"),
array("field"=>"quantity_per_unit", "op"=>"cn", "data"=>"box"),
)
)
);
$g->set_options($opt);
$g->table = "products";
$g->select_command = "select p.*,s.company_name, category_name from products p
inner join suppliers s on s.supplier_id = p.supplier_id
inner join categories c on c.category_id = p.category_id
";
$cols = array();
$col = array();
$col["title"] = "Product Id";
$col["name"] = "product_id";
$col["width"] = "100";
$col["editable"] = true;
$col["search"] = true;
$col["hidden"] = true;
$cols[] = $col;
$col = array();
$col["title"] = "Image";
$col["name"] = "product_image";
$col["width"] = "20";
$col["editable"] = false;
$col["icon"] = "image";
$col["search"] = false;
$col["sortable"] = false;
$col["template"] = "<div style='background-image: url(../../assets/img/products/{product_id}.jpg); max-width:100px; max-height:100px; width:100%; height: 100%; background-position-y: center;' />";
$cols[] = $col;
$col = array();
$col["title"] = "Product Name";
$col["name"] = "product_name";
$col["width"] = "50";
$col["editable"] = true;
$col["search"] = true;
$cols[] = $col;
$col = array();
$col["title"] = "Company Name";
$col["name"] = "company_name";
$col["width"] = "50";
$col["editable"] = false;
$col["search"] = true;
$col["edittype"] = "lookup";
$col["editoptions"] = array("table"=>"suppliers", "id"=>"company_name", "label"=>"company_name");
$cols[] = $col;
$col = array();
$col["title"] = "Supplier";
$col["name"] = "supplier_id";
$col["dbname"] = "s.supplier_id";
$col["width"] = "50";
$col["show"]["list"] = false;
$col["show"]["view"] = false;
$col["editable"] = true;
$col["search"] = true;
$col["edittype"] = "lookup";
$col["editoptions"] = array("table"=>"suppliers", "id"=>"supplier_id", "label"=>"company_name");
$cols[] = $col;
$col = array();
$col["title"] = "Category Name";
$col["name"] = "category_name";
$col["width"] = "50";
$col["editable"] = false;
$col["search"] = true;
$col["edittype"] = "lookup";
$col["editoptions"] = array("table"=>"categories", "id"=>"category_name", "label"=>"category_name");
$cols[] = $col;
$col = array();
$col["title"] = "Category";
$col["name"] = "category_id";
$col["dbname"] = "c.category_id";
$col["width"] = "30";
$col["show"]["list"] = false;
$col["show"]["view"] = false;
$col["editable"] = true;
$col["search"] = true;
$col["edittype"] = "lookup";
$col["editoptions"] = array("table"=>"categories", "id"=>"category_id", "label"=>"category_name");
$cols[] = $col;
$col = array();
$col["title"] = "Quantity / Unit";
$col["name"] = "quantity_per_unit";
$col["width"] = "50";
$col["editable"] = true;
$col["search"] = true;
$col["sanitize"] = false;
$cols[] = $col;
$col = array();
$col["title"] = "Unit Price";
$col["name"] = "unit_price";
$col["formatter"] = "currency";
$col["width"] = "30";
$col["align"] = "right";
$col["firstsortorder"] = "desc";
$col["editable"] = true;
$col["search"] = true;
$cols[] = $col;
$col = array();
$col["title"] = "# in Stock";
$col["name"] = "units_in_stock";
$col["formatter"] = "integer";
$col["width"] = "30";
$col["editable"] = true;
$col["search"] = true;
$cols[] = $col;
$col = array();
$col["title"] = "Reorder";
$col["name"] = "reorder_level";
$col["formatter"] = "integer";
$col["width"] = "30";
$col["editable"] = true;
$col["search"] = true;
$cols[] = $col;
$g->set_columns($cols);
$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "1";
$f["cellcss"] = "'color':'#8b86ff','font-weight':'bold'";
$f_conditions[] = $f;
$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "2";
$f["cellcss"] = "'color':'#20c933','font-weight':'bold'";
$f_conditions[] = $f;
$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "3";
$f["cellcss"] = "'color':'#20c933','font-weight':'bold'";
$f_conditions[] = $f;
$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "4";
$f["cellcss"] = "'color':'#f82b60','font-weight':'bold'";
$f_conditions[] = $f;
$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "5";
$f["cellcss"] = "'color':'#f82b60','font-weight':'bold'";
$f_conditions[] = $f;
$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "6";
$f["cellcss"] = "'color':'#20d9d2','font-weight':'bold'";
$f_conditions[] = $f;
$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "7";
$f["cellcss"] = "'color':'#ff6f2c','font-weight':'bold'";
$f_conditions[] = $f;
$f = array();
$f["column"] = "category_id";
$f["target"] = "category_name";
$f["op"] = "=";
$f["value"] = "8";
$f["cellcss"] = "'color':'#ff6f2c','font-weight':'bold'";
$f_conditions[] = $f;
$f = array();
$f["column"] = "units_in_stock";
$f["op"] = "<";
$f["value"] = "{reorder_level}";
$f["cellcss"] = "'background-color':'#ff851b','color':'white','fontWeight':'bold','opacity':0.4";
$f_conditions[] = $f;
$f = array();
$f["column"] = "unit_price";
$f["op"] = "<";
$f["value"] = "20";
$f["cellcss"] = "'background-color':'#c0e8ca','color':'green','fontWeight':'bold','opacity':0.4";
$f_conditions[] = $f;
$g->set_conditional_css($f_conditions);
$g->set_actions(array(
"add"=>true, // allow/disallow add
"edit"=>true, // allow/disallow edit
"delete"=>true, // allow/disallow delete
"export_pdf"=>true, // allow/disallow delete
"showhidecolumns"=>true,
"rowactions"=>true, // show/hide row wise edit/del/save option
"autofilter" => true, // show/hide autofilter for search
"search" => "group", // show/hide autofilter for search
)
);
$out = $g->render("list1");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="../../lib/js/themes/material/jquery-ui.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../lib/js/jqgrid/css/ui.jqgrid.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.0.1/jquery-migrate.min.js"></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>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://gitcdn.xyz/repo/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet" />
<script src="https://gitcdn.xyz/repo/wenzhixin/multiple-select/master/multiple-select.js"></script>
</head>
<body>
<div>
<?php echo $out?>
</div>
<script>
$.jgrid.nav.addtext = "Add";
$.jgrid.nav.edittext = "Edit";
// $.jgrid.nav.deltext = "Delete";
// $.jgrid.nav.viewtext = "View";
function load()
{
}
</script>
<style>
.ui-priority-secondary
{
background-color: #f5f5f5;
opacity: 1 !important;
}
#trv_product_image div
{
width: 136px;
height: 111px;
position: absolute;
right: 20px;
background-repeat: no-repeat;
opacity: 0.8;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.