Related
I have a grid like the following image:
Currently, I have add, edit, delete button in the footer. I need to have "edit" and "delete" button in each row. When I will click on edit button in each row, It will show edit form and when clicked on Submit, It will save data to the database.
My code looks the following:
$(document).ready(function () {
//jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
$("#list_records").jqGrid({
url: 'ajaxELearningFetchTableData.php?table=GET_TRAINING_TYPE',
//url: 'server.php',
editurl: 'ajaxELearningSaveTrainingType.php',
datatype: "json",
colNames: ["TRAINING TYPE ID", "TRAINING TYPE NAME", "REMARKS"],
colModel: [
{
label: 'TRAINING TYPE ID',
name: 'TRAINING_TYPE_ID',
index: 'TRAINING_TYPE_ID',
editable: true,
sortable: true,
sorttype: "text",
editoptions: {readonly: "readonly"},
width: 40
},
{
label: 'TRAINING TYPE NAME',
name: 'TRAINING_TYPE_NAME',
index: 'TRAINING_TYPE_NAME',
width: 120,
editable: true, // must set editable to true if you want to make the field editable
editoptions: {size: 50, maxlength: 80},
editrules: {required: true, maxlength: 80},
sortable: true,
sorttype: "text",
// set options related to the layout of the Edit and Add Forms
formoptions: {
colpos: 1, // the position of the column
rowpos: 2, // the position of the row
label: "Training Type Name:", // the label to show for each input control
elmsuffix: "(*)"
}
},
{
label: 'REMARKS',
name: 'REMARKS',
width: 140,
editable: true,
edittype: 'textarea',
editoptions: {rows: 3, cols: 45},
formoptions: {
colpos: 1,
rowpos: 3
}
}
],
loadonce: true,
viewrecords: true,
altRows: true,
// width: auto,
// height: auto,
width: 1000,
height: 300,
rowNum: 10,
rowList: [10, 20, 30],
caption: "Training Type Information",
sortname: 'TRAINING_TYPE_ID',
sortorder: "asc",
emptyrecords: "No Records to Display.",
//footerrow: true,
pager: "#perpage"
});
$('#list_records').navGrid('#perpage',
// the buttons to appear on the toolbar of the grid
{edit: true, add: true, del: true, search: true, refresh: true, view: false, position: "left", cloneToTop: false},
// options for the Edit Dialog
{
height: 'auto',
width: 620,
editCaption: "Edit Training Type",
url: 'ajaxSaveTrainingType.php',
recreateForm: true,
closeAfterEdit: true,
afterComplete: function (response) {
alert(response.responseText);
},
// afterShowForm: function(form) {
// form.closest('div.ui-jqdialog').center();
// },
afterSubmit: function () {
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true];
//location.reload(true);
}
},
// options for the Add Dialog
{
height: 'auto',
width: 620,
addCaption: "Add Training Type",
url: 'ajaxSaveTrainingType.php',
closeAfterAdd: true,
recreateForm: true,
afterComplete: function (response) {
alert(response.responseText);
},
// afterShowForm: function(form) {
// form.closest('div.ui-jqdialog').center();
// },
//
afterSubmit: function () {
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true];
//location.reload(true);
}
},
// options for the Delete Dailog
{
height: 'auto',
width: 620,
addCaption: "Delete Training Type",
url: 'ajaxSaveTrainingType.php',
closeAfterAdd: true,
recreateForm: true,
//rp_ge, postdata
onclickSubmit: function () {
var sel_id = $('#list_records').jqGrid('getGridParam', 'selrow');
var trainingTypeId = $('#list_records').jqGrid('getCell', sel_id, 'TRAINING_TYPE_ID');
return {tTypeId: trainingTypeId};
},
afterComplete: function (response) {
alert(response.responseText);
},
// afterShowForm: function(form) {
// form.closest('div.ui-jqdialog').center();
// },
afterSubmit: function () {
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true];
//location.reload(true);
}
});
});
Any help will be welcomed.
Thanks.
You can add the column, which uses formatter: "actions" with formatoptions: { editformbutton: true } properties. If you use free jqGrid (it's the fork of jqGrid, which I develop), then you can use template: "actions":
{ name: "act", template: "actions", formatoptions: { editformbutton: true } }
See the demo as an example.
In case of usage old jqGrid (version <=4.7) you can add the column with the following properties for example:
{ name: "act", formatter: "actions", formatoptions: { editformbutton: true },
width: 54, align: "center", fixed: true, hidedlg: true, resizable: false,
sortable: false, search: false, editable: false, viewable: false }
I'm using a PHP page to update the data when I edit them in the jqGrid (using the parameter "editurl").
$("#campionati").jqGrid({
url: "dbread.php",
datatype: "json",
mtype: "GET",
colNames: ["ID", "Nome", "Descrizione", "URL"],
colModel: [
{name: "id", width: 16, align: 'center'},
{name: "nome", width: 90, align: 'right', editable: true},
{name: "descrizione", width: 80, editable: true},
{name: "url", width: 600, editable: true, formatter: 'link', formatoptions: {target: '_blank'}}
],
editurl: "dbwrite.php?action=updateCampionati",
pager: "#pager",
...
It works.
My question is: what's kind of data that my PHP page has to return to tell to jqGrid if the update has been successful or not?
<php
...
echo 0;
or
<php
...
echo json_encode(array("result" => "OK"));
It's important the HTTP status code of the server response. You code seems to return the status code 200 OK. So the response will be interpreted as successful. To return information about the error one can use http_response_code for example.
I am a newbie to jqgrid and I am using jqgrid for displaying data along with codeigniter.
these are my grids:
grid 1
Student Table
<table id="list"></table>
<div id="pager"></div>
grid 2
Tutor Table
<table id="list1"></table>
<div id="pager1"></div>
I am loading a second grid when a user is double clicking on a row of the first grid.
My jqgrid code is:
<script type="text/javascript">
$(document).ready(function (){
var lastSel;
jQuery("#list").jqGrid({
url:'<?php echo $base_url.'index.php/demo/loadData'?>', //another controller function for generating data
mtype : "post", //Ajax request type. It also could be GET
datatype: "json", //supported formats XML, JSON or Arrray
colNames:['Name','Email','Passport','Phone','Fax','Address','Note'], //Grid column headings
colModel:[
{name:'name',index:'name', width:100, align:"left",editable:false},
{name:'email',index:'email', width:150, align:"left",editable:false},
{name:'passport',index:'passport', width:100, align:"right",editable:true},
{name:'phone',index:'phone', width:100, align:"right",editable:false},
{name:'fax',index:'fax', width:100, align:"right",editable:true},
{name:'address',index:'address', width:100, align:"right",editable:true},
{name:'note',index:'note',width:100,align:"right",editable:true},
],
rowNum:10,
width: 750,
//height: 300,
rowList:[10,20,30],
pager: '#pager',
sortname: 'id',
viewrecords: true,
rownumbers: true,
gridview: true,
caption:"List Of Students",
ondblClickRow:function(id){
if(id && id!==lastSel){
jQuery('this').restoreRow(lastSel);
lastSel=id;
}
// alert(id);
jQuery("#list1").jqGrid({
url:"<?php echo $base_url.'index.php/demo/load_tutor_data/'?>"+$('#'+id).children("td[aria-describedby='list_passport']").html(), //another controller function for generating data
mtype : "post", //Ajax request type. It also could be GET
datatype: "json", //supported formats XML, JSON or Arrray
colNames:['Name','Email','Passport','Phone','Fax','Address','Note','Assign',''], //Grid column headings
colModel:[
{name:'name',index:'name', width:100, align:"left",editable:false},
{name:'email',index:'email', width:150, align:"left",editable:false},
{name:'passport',index:'passport', width:100, align:"right",editable:true},
{name:'phone',index:'phone', width:100, align:"right",editable:false},
{name:'fax',index:'fax', width:100, align:"right",editable:true},
{name:'address',index:'address', width:100, align:"right",editable:true},
{name:'note',index:'note',width:100,align:"right",editable:true},
{name: 'checkbox', index: 'checkbox', align:"center",editable: true,
edittype: 'checkbox', editoptions: { value: "True:False" ,defaultvalue:"False" },
formatter: "checkbox", formatoptions: { disabled: false} },
{name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions',
formatoptions:{keys:true}},
],
rowNum:10,
width: 750,
//height: 300,
rowList:[10,20,30],
pager: '#pager1',
sortname: 'id',
viewrecords: true,
rownumbers: true,
gridview: true,
caption:"List Of Tutors",
onSelectRow:function(id){
alert("Assign Here");
},
onCellSelect:function(rowid, iCol, cellcontent, e){
if(iCol==8)
alert("make submit");
},
editurl:"<?php echo $base_url.'index.php/demo/load_tutor_data'?>"
}).navGrid('#pager1',{edit:false,add:false,del:false});
$("#admintask").show();
},
editurl:"<?php echo $base_url.'index.php/demo/loadData'?>"
}).navGrid('#pager',{edit:false,add:false,del:false});
$("tr").click(function(){
alert("test");
});
});
$("#bsdata").click(function(){
jQuery("#list").jqGrid('searchGrid',
{sopt:['cn','bw','eq','ne','lt','gt','ew']}
);
});
$("#bedata").click(function(){
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#list").jqGrid('editGridRow',gr, {height:280,reloadAfterSubmit:false});
else alert("Please Select Row");
});
$("#list").hover(function(){
var gr = jQuery("#list").jqGrid('getGridParam','selrow');
});
$("#test1").click(function(){
$("#admintask").hide();
});
</script>
When I double click for the first time on a row in student table, it works fine. But when I double click on other row in the student table, it is showing the same data. I checked in the network of browser and it is not posting anything to the network as well.
Please let me know where am I making the mistake.
You have to unload the #list1 grid before loading, like below,
$("#list1 ").jqGrid('GridUnload');
jQuery("#list1").jqGrid({ ...............});
Here's my jQuery script
$("table#list").jqGrid({
url:'example.php',
datatype: 'json',
mtype: 'POST',
colNames:['ID', 'Position', 'Abrv', 'Department'],
colModel :[
{name:'id', index:'id', width:40, hidden: true, editrules:{edithidden:true}},
{name:'position', index:'position', width:300, editable: true, required: true},
{name:'abvr', index:'abvr', width:50, editable: true, required: true},
{name:'department', index:'department', editable: true, edittype: 'select', editoptions:{dataUrl: 'test2.php'}}
],
width: 600,
height: 250,
rownumbers: true,
pager: '#pager',
rowNum: 10,
rowList:[10,20],
sortname: 'id',
sortorder: 'ASC',
viewrecords: true,
gridview: true,
caption: 'Position',
loadError : function(xhr,st,err) {
$("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
},
editurl: 'insertDB.php'
});
insertDB.php
if($_POST['oper'] == 'add'){
$position = $_POST['position'];
$department = $_POST['department'];
$query = "INSERT INTO test_position VALUES ('', '$position', '$department')";
$run = mysql_query($query);
}
Nothing happens when I submit the form. My database likewise does not update.
Is my post variables in PHP incorrect?
Is there a way to get what insertDB.php returns and display it in jQuery?
I forgot to select a database. I found out after using FireBug.
I'm having an issue with Jqgrid, I've got two grids on a single page and onclick on a row of the first grid needs to reload the second grid.
I'm 100% sure the second grid is configured correctly is if I manually pass a hard coded id it populates correctly.
Just the reload function is not working. Please could someone assist. Below is the jquery code for both grids
$(document).ready(function() {
jQuery("#list2").jqGrid({
url:'classes/ListServices.php',
datatype: "json",
mtype: 'POST',
colNames: ['Id','Description', 'Details', 'Cost in (R)'],
colModel: [
{name:'Id',index:'Id', align:"center", width:30},
{name:'Description',index:'Description', align:"center"},
{name:'Details',index:'Details', align:"left"},
{name:'Cost',index:'Cost',align:"center",width:30,formatter:'currency'},
],
width: 780,
height: 100,
rowNum:18,
pager: '#pager1',
loadonce: true,
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption:"Services List",
multiselect: false,
onSelectRow: function(ids) {
if(ids == null) {
ids=0;
if(jQuery("#list3").jqGrid('getGridParam','records') >0 ) {
jQuery("#list3").jqGrid('setGridParam',
{url:"subgrid.php?q=1&id="+ids,page:1});
jQuery("#list3").jqGrid.trigger('reloadGrid');
}
}
else {
jQuery("#list3").jqGrid('setGridParam',
{url:"subgrid.php?q=1&id="+ids,page:1});
jQuery("#list3").jqGrid.trigger('reloadGrid');
}
}
});
jQuery("#list2").jqGrid('navGrid','#pager2',
{edit:false,add:false,del:false,multipleSearch:true});
jQuery("#list2").jqGrid('filterToolbar',
{stringResult: true,searchOnEnter : false});
jQuery("#list3").jqGrid({
url:'classes/ListServicesDetails.php?Id=2',
datatype: "json",
mtype: 'POST',
colNames: ['Id','ServiceId', 'Description', 'Details', 'Cost in (R)'],
colModel: [
{name:'Id',index:'Id', align:"center", width:30},
{name:'ServiceId',index:'ServiceId', align:"center", width:30},
{name:'Description',index:'Description', align:"center"},
{name:'Details',index:'Details', align:"left"},
{name:'Cost',index:'Cost',align:"center",width:30,formatter:'currency'},
],
width: 780,
height: 200,
rowNum:18,
pager: '#pager2',
loadonce: true,
sortname: 'id',
viewrecords: true,
sortorder: "asc",
caption:"Services Details List",
multiselect: false,
onSelectRow: function(id) {
alert(id);
}
});
jQuery("#list3").jqGrid('navGrid','#pager2',
{edit:false,add:false,del:false,multipleSearch:true});
});
Please if someone could assist me ...
Thanks
Both jqGrids has parameters loadonce: true. It means that after the first loading the datatype of the grids will be changed from "json" to "local". To reload the second grid you should reset the datatype parameter to "json" together with url and page parameters.