Steve
Reputation: 31
How to work on jqgrid Add, edit, delete? using php
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...
Upvotes: 3
Views: 16400
Answers (4)
ssgodfather
Reputation: 11
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);
Upvotes: 1
jitendra
Reputation: 21
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;
}
});
});
Upvotes: 2
derek
Reputation: 1
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.
Upvotes: -1
Tareq
Reputation: 2006
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')
{
... ... ...
}
Upvotes: 0
Related Questions
- create button add delete edit jqgrid
- jqGrid: How to add edit and delete button in every row with form editing enabled?
- Add/edit/delete a row in free jqGrid
- How to add,edit,search,delete in jQgrid
- jqGrid - edit data
- jqgrid - add,edit,delete isn't working
- Implementing Delete and Edit operations in jqgrid
- Individual cell editing in jqgrid
- jqgrid, help adding , edditing, and deleting rows
- Using jqGrid with ArrayData and using the add, edit and delete buttons