<?php
/**
* PHP Grid Component
*
* @author Abu Ghufran <[email protected]> - 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($db_conf);
$grid["caption"] = "Sample Grid";
$grid["autowidth"] = true;
// fill external form on select row
$grid["onSelectRow"] = "function(){ load_form(); }";
$g->set_options($grid);
$g->table = "clients";
$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>
body { font-family: arial; }
</style>
<div style="float:left; width:70%">
<?php echo $out?>
</div>
<div style="float:left; width:25%; padding: 0 10px;">
<form method="post" id="client_form_add" action="" title='' style="margin:0px;"> <fieldset>
<legend>Custom Add Form</legend>
<table>
<tbody>
<tr>
<td> Name:</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td> Gender:</td>
<td><input type="text" name="gender" /></td>
</tr>
<tr>
<td> Company:</td>
<td><input type="text" name="company" /></td>
</tr>
<tr>
<td> </td>
<td><input type="button" id="insertdata" value="Add" /></td>
</tr>
</tbody>
</table>
</fieldset>
</form>
<br>
<form method="post" id="client_form" action="" title='' style="margin:0px;"> <fieldset>
<legend>Custom Edit Form</legend>
<table class="edit-form">
<tbody>
<tr>
<td> Client Id:</td>
<td><input type="text" name="client_id" readonly=true id="client_id"/></td>
</tr>
<tr>
<td> Name:</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td> Gender:</td>
<td><input type="text" name="gender" /></td>
</tr>
<tr>
<td> Company:</td>
<td><input type="text" name="company" /></td>
</tr>
<tr>
<td> </td>
<td><input type="button" id="savedata" value="Save" /></td>
</tr>
</tbody>
</table>
</fieldset>
</form>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mask/0.9.0/jquery.mask.min.js"></script>
<script type="text/javascript">
// load grid row in form
var load_form = function ()
{
var row = jQuery("#list1").jqGrid('getGridParam','selrow');
if(row)
{
jQuery("#list1").jqGrid('GridToForm',row,"#client_form");
if ($(".edit-form input[name=gender]").val() == "male")
$(".edit-form input[name=gender]").css({'background-color':'lightgreen'});
if ($(".edit-form input[name=gender]").val() == "female")
$(".edit-form input[name=gender]").css({'background-color':'lightyellow'});
// jQuery(".edit-form input[name=company]").mask("000.00");
}
else
{
alert("Please select Row")
}
}
// save form data to database using grid api
jQuery("#savedata").click(function()
{
var id = jQuery("#client_id").val();
if(id)
{
var grid = jQuery("#list1");
grid.jqGrid('FormToGrid',id,"#client_form");
// call ajax to update date in db
var request = '';
request = $('#client_form').serialize();
request += '&oper=edit&id='+id;
jQuery.ajax({
url: grid.jqGrid('getGridParam','url'),
dataType: 'html',
data: request,
type: 'POST',
error: function(res, status) {
jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap,'<div class=\"ui-state-error\">'+ res.responseText +'</div>',
jQuery.jgrid.edit.bClose,{buttonalign:'right'});
},
success: function( data ) {
// reload grid for data changes
grid.jqGrid().trigger('reloadGrid',[{jqgrid_page:1}]);
}
});
}
});
// save form data to database using grid api
jQuery("#insertdata").click(function()
{
var grid = jQuery("#list1");
// call ajax to update date in db
var request = '';
request = $('#client_form_add').serialize();
request += '&oper=add';
jQuery.ajax({
url: grid.jqGrid('getGridParam','url'),
dataType: 'html',
data: request,
type: 'POST',
error: function(res, status) {
jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap,'<div class=\"ui-state-error\">'+ res.responseText +'</div>',
jQuery.jgrid.edit.bClose,{buttonalign:'right'});
},
success: function( data ) {
// reload grid for data changes
grid.jqGrid().trigger('reloadGrid',[{jqgrid_page:1}]);
}
});
});
</script>
</body>
</html>