Last active
June 14, 2020 20:03
-
-
Save gridphp/ddd9ce8592144f8ea8b1db039e708f66 to your computer and use it in GitHub Desktop.
Custom Edit links - 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 1.5.2 | |
* @license: see license.txt included in package | |
*/ | |
include("../../config.php"); | |
$base_path = strstr(realpath("."),"demos",true)."lib/"; | |
include($base_path."inc/jqgrid_dist.php"); | |
$g = new jqgrid(); | |
$grid["rowNum"] = 10; // by default 20 | |
$grid["sortname"] = 'id'; // by default sort grid by this field | |
$grid["sortorder"] = "desc"; // ASC or DESC | |
$grid["caption"] = "Invoice Data"; // caption of grid | |
$grid["autowidth"] = true; // expand grid to screen width | |
$grid["loadComplete"] = "function(){ onload(); }"; | |
$g->set_options($grid); | |
$g->set_actions(array( | |
"add"=>true, // allow/disallow add | |
"edit"=>true, // allow/disallow edit | |
"delete"=>true, // allow/disallow delete | |
"rowactions"=>true, // show/hide row wise edit/del/save option | |
"export"=>true, // show/hide export to excel option | |
"autofilter" => true, // show/hide autofilter for search | |
"search" => "advance" // show single/multi field search condition (e.g. simple or advance) | |
) | |
); | |
// you can provide custom SQL query to display data | |
$g->select_command = "SELECT * FROM (SELECT i.id, invdate , c.name, | |
i.note, i.total, i.closed FROM invheader i | |
INNER JOIN clients c ON c.client_id = i.client_id) o"; | |
// this db table will be used for add,edit,delete | |
$g->table = "invheader"; | |
// you can customize your own columns ... | |
$col = array(); | |
$col["title"] = "Id"; // caption of column | |
$col["name"] = "id"; // grid column name, must be exactly same as returned column-name from sql (tablefield or field-alias) | |
$col["width"] = "10"; | |
$cols[] = $col; | |
$col = array(); | |
$col["title"] = "Client"; | |
$col["name"] = "name"; | |
$col["width"] = "100"; | |
$col["editable"] = false; // this column is not editable | |
$col["search"] = false; // this column is not searchable | |
$cols[] = $col; | |
$col = array(); | |
$col["title"] = "Date"; | |
$col["name"] = "invdate"; | |
$col["width"] = "50"; | |
$col["editable"] = true; // this column is editable | |
$col["editoptions"] = array("size"=>20); // with default display of textbox with size 20 | |
$col["editrules"] = array("required"=>true); // required:true(false), number:true(false), minValue:val, maxValue:val | |
$col["formatter"] = "date"; // format as date | |
$cols[] = $col; | |
$col = array(); | |
$col["title"] = "Total"; | |
$col["name"] = "total"; | |
$col["width"] = "50"; | |
$col["editable"] = true; | |
// default render is textbox | |
$col["editoptions"] = array("value"=>'10'); | |
$cols[] = $col; | |
$col = array(); | |
$col["title"] = "Closed"; | |
$col["name"] = "closed"; | |
$col["width"] = "50"; | |
$col["editable"] = true; | |
$col["edittype"] = "checkbox"; // render as checkbox | |
$col["editoptions"] = array("value"=>"Yes:No"); // with these values "checked_value:unchecked_value" | |
$cols[] = $col; | |
# Custom made column to show link, must have default value as it's not db driven | |
$col = array(); | |
$col["title"] = "Details"; | |
$col["name"] = "more_options"; | |
$col["width"] = "30"; | |
$col["align"] = "center"; | |
$col["search"] = false; | |
$col["sortable"] = false; | |
$buttons_html = "<a target='_blank' class='fancybox' data-fancybox-type='iframe' href='http://jqgrid/dev/demos/editing/index.php' style='text-decoration:none; white-space:none; border:1px solid gray; padding:2px; position:relative; width:25px; color:red'>Buy</a> <a target='_blank' href='http://www.google.com?id={id}' style='text-decoration:none; white-space:none; border:1px solid gray; padding:2px; position:relative; width:25px; color:green'>Try</a>"; | |
$col["default"] = $buttons_html; | |
$cols[] = $col; | |
// pass the cooked columns to grid | |
$g->set_columns($cols); | |
// 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> | |
<!-- Add fancyBox main JS and CSS files --> | |
<link type="text/css" rel="stylesheet" href="//cdn.jsdelivr.net/fancybox/2.1.4/jquery.fancybox.css" /> | |
<script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.4/jquery.fancybox.js"></script> | |
</head> | |
<body> | |
<div style="margin:10px"> | |
<?php echo $out?> | |
</div> | |
<script> | |
function onload() { | |
var add_selector = '.ui-jqgrid-pager #add_list1, .ui-jqgrid-toppager #add_list1'; | |
var edit_selector = '.ui-jqgrid-pager #edit_list1, .ui-jqgrid-toppager #edit_list1, a.ui-icon-pencil'; | |
var view_selector = '.ui-jqgrid-pager #view_list1, .ui-jqgrid-toppager #view_list1'; | |
// add | |
$(add_selector).unbind( "click" ); | |
$(add_selector).click( function (event) { | |
alert("add.php"); | |
}); | |
// edit | |
$(edit_selector).unbind( "click" ); | |
$(edit_selector).attr('onclick',''); | |
$(edit_selector).click( function (event) { | |
// for row icon | |
if($(this).prop("tagName") == "A") | |
{ | |
var id = $(this).closest("tr").attr("id"); | |
jQuery('#list1').jqGrid('setSelection',id); | |
} | |
// for selected row | |
var selectedRow = jQuery('#list1').jqGrid('getGridParam','selrow'); | |
if (!selectedRow) | |
{ | |
alert('Please select row'); | |
return; | |
} | |
var name = jQuery('#list1').jqGrid('getCell', selectedRow, 'name'); | |
var date = jQuery('#list1').jqGrid('getCell', selectedRow, 'invdate'); | |
alert("edit.php?id="+selectedRow+"&name="+name+"&date="+date); | |
}); | |
// view | |
$(view_selector).unbind( "click" ); | |
$(view_selector).click( function (event) { | |
// for selected row | |
var selectedRow = jQuery('#list1').jqGrid('getGridParam','selrow'); | |
if (!selectedRow) | |
{ | |
alert('Please select row'); | |
return; | |
} | |
var name = jQuery('#list1').jqGrid('getCell', selectedRow, 'name'); | |
var date = jQuery('#list1').jqGrid('getCell', selectedRow, 'invdate'); | |
alert("view.php?id="+selectedRow+"&name="+name+"&date="+date); | |
}); | |
}; | |
// custom edit button on grid | |
jQuery(document).ready(function(){ | |
jQuery('#list1').jqGrid('navButtonAdd', '#list1_pager', | |
{ | |
'caption' : 'Custom Page', | |
'buttonicon' : 'ui-icon-pencil', | |
'onClickButton': function() | |
{ | |
// for selected rows | |
var selectedRow = jQuery('#list1').jqGrid('getGridParam','selrow'); | |
if (selectedRow.length == 0) | |
{ | |
alert('Please select row'); | |
return; | |
} | |
var name = jQuery('#list1').jqGrid('getCell', selectedRow, 'name'); | |
var date = jQuery('#list1').jqGrid('getCell', selectedRow, 'invdate'); | |
window.open("custom.php?id="+selectedRow+"&name="+name+"&date="+date); | |
}, | |
'position': 'last' | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment