How to work on jqgrid Add, edit, delete? using php - jqgrid-php

Question

how to work on add row, edit, del the row in jqgrid? how to invoke editurl??
my code is below... jqgrid.php page.
var $mygrid= jQuery("#list").jqGrid({
url:'example.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Seq','Name', 'ID','Pass','Mail','Note'],
colModel :[
{name:'seq',index:'seq', width:55, resizable:false, editable:true, editoptions:{readonly:true,size:10}},
{name:'name',index:'name', width:90,resizable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'id',index:'id', width:80, align:'right', editable:true, editoptions:{readonly:false,size:10}},
{name:'pass',index:'pass', width:80, align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'mail',index:'mail', width:80,align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'id',index:'id', width:150, sortable:false} ],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30,50],
sortname: 'seq',
sortorder: "Asc",
width: 1000,
height: 230,
viewrecords: true,
multiselect: true,
editable: true,
toolbar: [true,"top"],
multikey: "ctrlKey",
editurl:'add.php',
caption: 'staff'
});
$("#list").jqGrid('navGrid', '#pager', {
edit: true,
add: true,
del: true,
search: false,
refresh:false
})
});
And example.php code is
enter code here <?php
$dbhost = 'localhost';
$dbuser = 'test';
$dbpassword = 'test';
$database = 'cs_test';
$page = $_GET['page'];
// get how many rows we want to have into the grid - rowNum parameter in the grid
$limit = $_GET['rows'];
// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel
$sidx = $_GET['sidx'];
// sorting order - at first time sortorder
$sord = $_GET['sord'];
// if we not pass at first time index use the first column for the index or what you want
if(!$sidx) $sidx =1;
// connect to the MySQL database server
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
// select the database
mysql_select_db($database) or die("Error conecting to db.");
// calculate the number of rows for the query. We need this to paging the result
$result = mysql_query("SELECT COUNT(*) AS count FROM TM_Staff");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
// calculation of total pages for the query
if( $count > 0 ) {
$total_pages = ceil($count/$limit);
//$total_pages = 20;
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit;
if($start<0) $start = 0;
// the actual query for the grid data
$SQL = "SELECT seq,name,id,pass,mail,ins_dt from TM_Staff ORDER BY $sidx $sord LIMIT $start,$limit";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
header("Content-type: application/xhtml+xml;charset=utf-8");
} else {
header("Content-type: text/xml;charset=utf-8");
}
echo "<?xml version='1.0' encoding='utf-8'?>";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>".$total_pages."</total>";
echo "<records>".$count."</records>";
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
echo "<row id='". $row[seq]."'>";
echo "<cell>". $row[seq]."</cell>";
echo "<cell>". $row[name]."</cell>";
echo "<cell>". $row[id]."</cell>";
echo "<cell>". $row[pass]."</cell>";
echo "<cell>". $row[mail]."</cell>";
echo "<cell><![CDATA[". $row[id]."]]></cell>";
echo "</row>";
}
echo "</rows>";
?>
plz help me, im in trouble...

Answer 1

var lastSel;
$(function () {
$("#grid").jqGrid({
colNames: ['Name', 'Address', 'Contact', 'Pan Number', 'Registration Number', 'Email Address', 'File'],
colModel: [
{ name: 'Name', index: 'Name', sortable: true, align: 'left', title: false, width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'Address', index: 'Address', sortable: true, title: false, align: 'left', width: 220, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'Contact', index: 'Contact', sortable: true, title: false, align: 'left', width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'PanNumber', index: 'PanNumber', sortable: true, title: false, align: 'left', width: 200, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'ServiceTaxRegistrationNo', index: 'ServiceTaxRegistrationNo', title: false, sortable: true, align: 'left', width: 240, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmprefix: '* ' }, searchoptions: { sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc']} },
{ name: 'Email', index: 'Email', sortable: true, align: 'left', title: false, width: 190, editable: true, edittype: 'text', editrules: { required: true, email: true }, formoptions: { elmprefix: '* ' }, search: false },
{ name: 'FilePath', index: 'FilePath', sortable: false, title: false, align: 'left', editable: true, edittype: 'file', width: 190, allowedExtensions: ['jpg', 'jpeg', 'png', 'gif'],
search: false, editoptions: {
enctype: "multipart/form-data"
}
},
],
pager: jQuery("#pager"),
sortname: 'Name',
rowNum: 10,
rowList: [10, 20, 25],
sortOrder: "",
height: 225,
viewrecords: true,
rownumbers: true,
caption: "Companies",
width: 950,
imgpath: '/Content/themes/smoothness/images',
url: "/Master/GetCompanies",
editurl: "/Master/PerformCompanyCRUDAction",
datatype: "json",
mtype: "GET",
onCellSelect: function (rowid, iCol, aData) {
if (rowid && rowid !== lastSel) {
if (lastSel) {
$("#" + lastSel).removeClass('state-active');
$("#" + lastSel).addClass('ui-widget-content');
}
$("#" + rowid).removeClass('ui-widget-content');
$("#" + rowid).addClass('state-active');
lastSel = rowid;
}
}
});
jQuery("#grid").jqGrid('navGrid', '#pager',
{ edit: true, add: true, del: true, search: true, refresh: true },
{ closeOnEscape: true, reloadAfterSubmit: true, modal: true,
beforeShowForm: function (formid) {
$("#pData, #nData").hide();
},
onInitializeForm: function (formid) {
$(formid).attr('method', 'POST');
$(formid).attr('action', '');
$(formid).attr('enctype', 'multipart/form-data');
},
test: function () {
var filenam = $("#FilePath").val();
},
afterSubmit: function (response, postdata) {
$.ajaxFileUpload({
url: '/Master/CompanyFileUpload?CompanyId=' + postdata.id,
secureuri: false,
data: postdata,
cache: false,
contentType: 'multipart/form-data',
processData: false,
type: 'POST',
fileElementId: 'FilePath',
dataType: 'json',
success: function (data, status) {
// $('#notificationDiv').text("Bank Updated Successfully!");
}
});
return true;
},
closeAfterEdit: true, left: 200, top: 50, width: 500,
afterShowForm: function (formid) {
$('#Contact').numeric({ allow: "," });
},
afterComplete: function (response, postdata, formid) {
if (response.responseText == "true") {
$("#notificationDivSuccess").delay(0).fadeIn("slow");
$('#notificationDivSuccess').text("Record Updated Successfully!");
$("#notificationDivSuccess").delay(2500).fadeOut("slow");
$('#notificationDivFail').text("");
}
else {
$("#notificationDivFail").delay(0).fadeIn("slow");
$('#notificationDivFail').text("Record Already Exist!");
$("#notificationDivFail").delay(2500).fadeOut("slow");
$('#notificationDivSuccess').text("");
}
}
},
{ closeOnEscape: true, reloadAfterSubmit: true,
closeAfterAdd: true, left: 200, top: 50, width: 500,
onInitializeForm: function (formid) {
$(formid).attr('method', 'POST');
$(formid).attr('action', '');
$(formid).attr('enctype', 'multipart/form-data');
},
afterShowForm: function (formid) {
$('#Contact').numeric({ allow: "," });
},
afterSubmit: function (response, postdata) {
// var data = $.parseJSON(response.responseText);
// bid = data.id;
// pageNo = data.page;
//debugger;
var Id = response.responseText;
$.ajaxFileUpload({
url: '/Master/CompanyFileUpload?CompanyId=' + Id,
secureuri: false,
data: postdata,
cache: false,
contentType: 'multipart/form-data',
processData: false,
type: 'POST',
fileElementId: 'FilePath',
dataType: 'json',
success: function (data, status) {
// $('#notificationDiv').text("Bank Added Successfully!");
}
});
return true;
}
,
afterComplete: function (response, postdata, formid) {
if (response.responseText != "") {
if (response.responseText == "false") {
$("#notificationDivFail").delay(0).fadeIn("slow");
$('#notificationDivFail').text("Record Already Exist!");
$("#notificationDivFail").delay(2500).fadeOut("slow");
$('#notificationDivSuccess').text("");
}
else {
$("#notificationDivSuccess").delay(0).fadeIn("slow");
$('#notificationDivSuccess').text("New Record Added Successfully!");
$("#notificationDivSuccess").delay(2500).fadeOut("slow");
$('#notificationDivFail').text("");
}
}
else {
}
}
},
{ closeOnEscape: true, reloadAfterSubmit: true, left: 300, top: 80, width: 220,
afterComplete: function (response, postdata, formid) {
if (response.responseText == "true") {
$("#notificationDivSuccess").delay(0).fadeIn("slow");
$('#notificationDivSuccess').text("Record Deleted Successfully!");
$("#notificationDivSuccess").delay(2500).fadeOut("slow");
$('#notificationDivFail').text("");
}
else {
$("#notificationDivFail").delay(0).fadeIn("slow");
$('#notificationDivFail').text("The selected record can not be deleted, Please delete associated record first");
$("#notificationDivFail").delay(2500).fadeOut("slow");
$('#notificationDivSuccess').text("");
}
}
},
{ closeAfterSearch: true, closeOnEscape: true, left: 200, top: 50, enableClear: true,
onClose: function () {
var postdata = $("#grid").jqGrid('getGridParam', 'postData');
postdata._search = false;
postdata.searchString = "";
$("#grid").trigger('reloadGrid');
return true;
}
});
});

Answer 2

In edit.php you have to put it like this:
if($_POST['oper']=='add')
{
... ... ...
}
else if($_POST['oper']=='edit')
{
... ... ...
}
else if($_POST['oper']=='del')
{
... ... ...
}
If you want to see what you are getting, use: print_r($_REQUEST);

Answer 3

var $mygrid= jQuery("#list").jqGrid({
url:'example.php',
editurl: 'edit.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Seq','Name', 'ID','Pass','Mail','Note'],
colModel :[
{name:'seq',index:'seq', width:55, resizable:false, editable:true, editoptions:{readonly:true,size:10}},
{name:'name',index:'name', width:90,resizable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'id',index:'id', width:80, align:'right', editable:true, editoptions:{readonly:false,size:10}},
{name:'pass',index:'pass', width:80, align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'mail',index:'mail', width:80,align:'right', sortable:false, editable:true, editoptions:{readonly:false,size:10}},
{name:'id',index:'id', width:150, sortable:false} ],
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30,50],
sortname: 'seq',
sortorder: "Asc",
width: 1000,
height: 230,
viewrecords: true,
multiselect: true,
editable: true,
toolbar: [true,"top"],
multikey: "ctrlKey",
caption: 'staff'
});
$("#list").jqGrid('navGrid', '#pager', {
edit: true,
add: true,
del: true,
search: false,
refresh:false
})
In edit.php
if($_GET['oper']=='add')
{
... ... ...
}
if($_GET['oper']=='edit')
{
... ... ...
}
if($_GET['oper']=='del')
{
... ... ...
}

Answer 4

I really like the idea of PHPjq however the code they are "selling" does not have any of the best practices to prevent SQL injection. so buy their code and add the proper sql escape wrappers or write your own .... be safe not lazy.