使用 asp.net 和 C# 的 JQgrid 内联编辑
JQgrid inline editing with asp.net and C#
我在下面使用上面的内容查看数据并使用它进行编辑。第一行用于编辑按钮，但每当我单击保存按钮时，我都无法捕获该事件。
我想知道它是如何工作的，以及如何调用 AJAX 函数将该数据存储到 SQL 服务器。
$(function() {
var grid_selector = "#grid-table-Labor";
$("#grid-table-Labor").jqGrid({
url: 'LaborApproval.aspx/GetLaborData', //asp function to get all data from data base to grid
data: "{}",
datatype: 'json',
mtype: 'POST',
serializeGridData: function(postData) {
return JSON.stringify(postData);
},
ajaxGridOptions: {
contentType: "application/json"
},
loadonce: true,
colNames: [' ', 'Employee Code', 'Name', 'Contractor', 'DOJ', 'Police Verification', 'Gate Pass Valid Upto', 'Status', 'Remark'],
colModel: [{
name: 'myac',
index: 'myac',
width: 80,
fixed: true,
sortable: false,
resize: false,
formatter: 'actions',
formatoptions: {
keys: true,
delbutton: false, //disable delete button
//delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback },
//editformbutton:true
}
},
{
name: 'EMPCODE',
index: 'EMPCODE',
width: 108,
formatter: 'showlink',
key: true
},
{
name: 'NAME',
index: 'NAME',
width: 140
},
{
name: 'CONTNAME',
index: 'CONTNAME',
width: 160
},
{
name: 'DOJ',
index: 'DOJ',
width: 70,
formatter: 'date',
formatoptions: {
newformat: 'd-m-y'
}
},
{
name: 'POLICE_VRIFICATION',
index: 'POLICE_VRIFICATION',
width: 124
},
{
name: 'GatePassValidUpto',
index: 'GatePassValidUpto',
editable: true,
sorttype: "date",
unformat: pickDate
},
{
name: 'Approve',
index: 'Approve',
width: 148,
editable: true,
edittype: "select",
editoptions: {
value: "1:Approve;0:Rejected"
}
},
{
name: 'REMARK',
index: 'REMARK',
width: 150,
sortable: false,
editable: true,
edittype: "textarea",
editoptions: {
rows: "2",
cols: "10"
}
}
],
pager: '#grid-pager-Labor',
altRows: true,
cacheUrlData: true,
//toppager: true,
rowNum: 1,
scrollOffset: 0, // to remove offset of scroll bar for imporved gui
rowList: [10, 50, 100, 200, 300, 500, 800, 1000, 1500],
//onSelectRow: editRow,
viewrecords: true,
emptyrecords: "Nothing to display",
//multiselect: true,
//multiboxonly: false,
gridview: true,
loadComplete: function() {
var table = this;
setTimeout(function() {
//styleCheckbox(table);
//updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
jsonReader: {
page: function(obj) {
return 1;
},
total: function(obj) {
return 1;
},
records: function(obj) {
return obj.d.length;
},
root: function(obj) {
return obj.d;
},
repeatitems: false,
id: "0"
},
//editurl: "LaborApproval.aspx/PostLaborData",
editurl: "",
caption: 'Labor List',
shrinkToFit: true,
height: 'auto',
//autowidth: true,
});
$('#grid-table-Labor').jqGrid('navGrid', '#grid-pager-Labor', {
edit: false,
del: false,
search: true,
searchtext: "Search",
searchicon: 'ace-icon fa fa-search orange',
view: true,
viewtext: "View",
viewicon: 'ace-icon fa fa-search-plus grey',
})
});
function updatePagerIcons(table) {
var replacement = {
'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() {
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
})
}
function enableTooltips(table) {
$('.navtable .ui-pg-button').tooltip({
container: 'body'
});
$(table).find('.ui-pg-div').tooltip({
container: 'body'
});
}
function pickDate(cellvalue, options, cell) {
setTimeout(function() {
$(cell).find('input[type=text]')
.datepicker({
format: 'dd-mm-yyyy',
autoclose: true
});
}, 0);
}
请务必注意使用的是哪个版本的 jqGrid。
如果您使用 Guriddo jqGrid you may need to use serializeRowData described in our documentation here 与使用 serializeGridData 从网格中获取参数相同。
亲切的问候
我使用了下面的代码来完成我的任务
$(function () {
var grid_selector = "#grid-table-Labor";
$("#grid-table-Labor").jqGrid({
url: 'LaborApproval.aspx/GetLaborData', //asp function to get all data from data base to grid
data: "{}",
datatype: 'json',
mtype: 'POST',
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: "application/json" },
loadonce: true,
colNames: [' ', 'Worker Code', 'Name', 'Contractor', 'DOJ', 'Police Verification', 'Gate Pass Valid Upto', 'Status', 'Remark'],
colModel: [
{
name: 'myac', index: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions',
formatoptions: {
keys: true,
delbutton: false,
editOptions: {},
addOptions: {},
delOptions: {}
}
},
{ name: 'EMPCODE', index: 'EMPCODE', width: 108, formatter:fontColorFormat, key: true },
{ name: 'NAME', index: 'NAME', width: 140 },
{ name: 'CONTNAME', index: 'CONTNAME', width: 160 },
{ name: 'DOJ', index: 'DOJ', width: 70, formatter: 'date', formatoptions: { newformat: 'd-m-y' } },
{ name: 'POLICE_VRIFICATION', index: 'POLICE_VRIFICATION', width: 124 },
{ name: 'GatePassValidUpto', index: 'GatePassValidUpto', editable: true, sorttype: "date", formatter: 'date', unformat: pickDate, formatoptions: { newformat: 'd-m-Y' } },
{ name: 'Approve', index: 'Approve', width: 148, editable: true, edittype: "select", editoptions: { value: "True:Approve;False:Reject" } },
{ name: 'REMARK', index: 'REMARK', width: 150, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10" } }
],
pager: '#grid-pager-Labor',
altRows: true,
//cacheUrlData: true,
//toppager: true,
rowNum: 10,
scrollOffset: 0, // to remove offset of scroll bar for imporved gui
rowList: [10, 50, 100, 200, 300, 500, 800, 1000, 1500],
//onSelectRow: editRow,
viewrecords: true,
emptyrecords: "Nothing to display",
//multiselect: true,
//multiboxonly: false,
gridview: true,
loadComplete: function () {
var table = this;
setTimeout(function () {
//styleCheckbox(table);
//updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "0"
},
editurl: '../../Handler/JQGridHRHandler.ashx',
caption: 'Labor List',
shrinkToFit: true,
height: 'auto',
//autowidth: true,
xmlReader: {
root: "list",
row: "Response",
id: "cfgId",
repeatitems: false
},
beforeSelectRow: function (rowid, e)
{
var href = '../Tab_Pages/EmployeeTab.aspx?empcode=' + rowid;
window.open(href);
return false;
//var iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]);
//if (this.p.colModel[iCol].name === 'EMPCODE') {
// var param = { param: rowid };
// console.log(rowid);
// $.ajax({
// url: "LaborApproval.aspx/ShowMe",
// data: JSON.stringify(param),
// dataType: "json",
// type: "POST",
// contentType: "application/json; charset=utf-8",
// success: function (data) {
// console.log(data);
// var box = bootbox.dialog({
// show: true,
// message: data['d'],
// title: "Labour Details",
// buttons: {
// ok: {
// label: "OK",
// className: "btn-primary",
// callback: function() {
// console.log('OK Button');
// }
// }
// }
// });
// box.modal('show');
// },
// error: function (XMLHttpRequest, textStatus, errorThrown) {
// var err = eval("(" + XMLHttpRequest.responseText + ")");
// alert(err.Message)
// // console.log("Ajax Error!");
// }
// });
// return false;
//}
}
});
$('#grid-table-Labor').jqGrid('navGrid', '#grid-pager-Labor',
{
edit: false,
del: false,
search: true,
searchtext: "Search",
searchicon: 'ace-icon fa fa-search orange',
view: true,
viewtext: "View",
viewicon: 'ace-icon fa fa-search-plus grey',
},
{ //EDIT portion
//Can also set the width and height of the editing window as below commented way
//height: 300,
//width: 400,
//top: 50,
//left: 100,
//dataheight: 280,
closeOnEscape: true,//Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam',
{ datatype: 'json' }).trigger('reloadGrid');//Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam',
{ datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]
//Captures and displays the response text on th Edit window
}
},
editData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
})
});
function updatePagerIcons(table) {
var replacement =
{
'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
})
}
function enableTooltips(table) {
$('.navtable .ui-pg-button').tooltip({ container: 'body' });
$(table).find('.ui-pg-div').tooltip({ container: 'body' });
}
function pickDate(cellvalue, options, cell) {
setTimeout(function () {
$(cell).find('input[type=text]')
.datepicker({ format: 'dd-mm-yyyy', autoclose: true });
}, 0);
}
var lastSelection;
function fontColorFormat(cellvalue, options, rowObject) {
var color = "blue";
var cellHtml = "<span style='color:" + color + "' originalValue='" + cellvalue + "'>" + cellvalue + "</span>";
return cellHtml;
}
function editRow(id) {
if (id && id !== lastSelection) {
var grid = $("#grid-table-Labor");
grid.jqGrid('restoreRow', lastSelection);
grid.jqGrid('editRow', id, { keys: true, focusField: 5 });
lastSelection = id;
}
}
我在下面使用上面的内容查看数据并使用它进行编辑。第一行用于编辑按钮，但每当我单击保存按钮时，我都无法捕获该事件。
我想知道它是如何工作的，以及如何调用 AJAX 函数将该数据存储到 SQL 服务器。
$(function() {
var grid_selector = "#grid-table-Labor";
$("#grid-table-Labor").jqGrid({
url: 'LaborApproval.aspx/GetLaborData', //asp function to get all data from data base to grid
data: "{}",
datatype: 'json',
mtype: 'POST',
serializeGridData: function(postData) {
return JSON.stringify(postData);
},
ajaxGridOptions: {
contentType: "application/json"
},
loadonce: true,
colNames: [' ', 'Employee Code', 'Name', 'Contractor', 'DOJ', 'Police Verification', 'Gate Pass Valid Upto', 'Status', 'Remark'],
colModel: [{
name: 'myac',
index: 'myac',
width: 80,
fixed: true,
sortable: false,
resize: false,
formatter: 'actions',
formatoptions: {
keys: true,
delbutton: false, //disable delete button
//delOptions: { recreateForm: true, beforeShowForm: beforeDeleteCallback },
//editformbutton:true
}
},
{
name: 'EMPCODE',
index: 'EMPCODE',
width: 108,
formatter: 'showlink',
key: true
},
{
name: 'NAME',
index: 'NAME',
width: 140
},
{
name: 'CONTNAME',
index: 'CONTNAME',
width: 160
},
{
name: 'DOJ',
index: 'DOJ',
width: 70,
formatter: 'date',
formatoptions: {
newformat: 'd-m-y'
}
},
{
name: 'POLICE_VRIFICATION',
index: 'POLICE_VRIFICATION',
width: 124
},
{
name: 'GatePassValidUpto',
index: 'GatePassValidUpto',
editable: true,
sorttype: "date",
unformat: pickDate
},
{
name: 'Approve',
index: 'Approve',
width: 148,
editable: true,
edittype: "select",
editoptions: {
value: "1:Approve;0:Rejected"
}
},
{
name: 'REMARK',
index: 'REMARK',
width: 150,
sortable: false,
editable: true,
edittype: "textarea",
editoptions: {
rows: "2",
cols: "10"
}
}
],
pager: '#grid-pager-Labor',
altRows: true,
cacheUrlData: true,
//toppager: true,
rowNum: 1,
scrollOffset: 0, // to remove offset of scroll bar for imporved gui
rowList: [10, 50, 100, 200, 300, 500, 800, 1000, 1500],
//onSelectRow: editRow,
viewrecords: true,
emptyrecords: "Nothing to display",
//multiselect: true,
//multiboxonly: false,
gridview: true,
loadComplete: function() {
var table = this;
setTimeout(function() {
//styleCheckbox(table);
//updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
jsonReader: {
page: function(obj) {
return 1;
},
total: function(obj) {
return 1;
},
records: function(obj) {
return obj.d.length;
},
root: function(obj) {
return obj.d;
},
repeatitems: false,
id: "0"
},
//editurl: "LaborApproval.aspx/PostLaborData",
editurl: "",
caption: 'Labor List',
shrinkToFit: true,
height: 'auto',
//autowidth: true,
});
$('#grid-table-Labor').jqGrid('navGrid', '#grid-pager-Labor', {
edit: false,
del: false,
search: true,
searchtext: "Search",
searchicon: 'ace-icon fa fa-search orange',
view: true,
viewtext: "View",
viewicon: 'ace-icon fa fa-search-plus grey',
})
});
function updatePagerIcons(table) {
var replacement = {
'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() {
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
})
}
function enableTooltips(table) {
$('.navtable .ui-pg-button').tooltip({
container: 'body'
});
$(table).find('.ui-pg-div').tooltip({
container: 'body'
});
}
function pickDate(cellvalue, options, cell) {
setTimeout(function() {
$(cell).find('input[type=text]')
.datepicker({
format: 'dd-mm-yyyy',
autoclose: true
});
}, 0);
}
请务必注意使用的是哪个版本的 jqGrid。 如果您使用 Guriddo jqGrid you may need to use serializeRowData described in our documentation here 与使用 serializeGridData 从网格中获取参数相同。
亲切的问候
我使用了下面的代码来完成我的任务
$(function () {
var grid_selector = "#grid-table-Labor";
$("#grid-table-Labor").jqGrid({
url: 'LaborApproval.aspx/GetLaborData', //asp function to get all data from data base to grid
data: "{}",
datatype: 'json',
mtype: 'POST',
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: "application/json" },
loadonce: true,
colNames: [' ', 'Worker Code', 'Name', 'Contractor', 'DOJ', 'Police Verification', 'Gate Pass Valid Upto', 'Status', 'Remark'],
colModel: [
{
name: 'myac', index: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions',
formatoptions: {
keys: true,
delbutton: false,
editOptions: {},
addOptions: {},
delOptions: {}
}
},
{ name: 'EMPCODE', index: 'EMPCODE', width: 108, formatter:fontColorFormat, key: true },
{ name: 'NAME', index: 'NAME', width: 140 },
{ name: 'CONTNAME', index: 'CONTNAME', width: 160 },
{ name: 'DOJ', index: 'DOJ', width: 70, formatter: 'date', formatoptions: { newformat: 'd-m-y' } },
{ name: 'POLICE_VRIFICATION', index: 'POLICE_VRIFICATION', width: 124 },
{ name: 'GatePassValidUpto', index: 'GatePassValidUpto', editable: true, sorttype: "date", formatter: 'date', unformat: pickDate, formatoptions: { newformat: 'd-m-Y' } },
{ name: 'Approve', index: 'Approve', width: 148, editable: true, edittype: "select", editoptions: { value: "True:Approve;False:Reject" } },
{ name: 'REMARK', index: 'REMARK', width: 150, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10" } }
],
pager: '#grid-pager-Labor',
altRows: true,
//cacheUrlData: true,
//toppager: true,
rowNum: 10,
scrollOffset: 0, // to remove offset of scroll bar for imporved gui
rowList: [10, 50, 100, 200, 300, 500, 800, 1000, 1500],
//onSelectRow: editRow,
viewrecords: true,
emptyrecords: "Nothing to display",
//multiselect: true,
//multiboxonly: false,
gridview: true,
loadComplete: function () {
var table = this;
setTimeout(function () {
//styleCheckbox(table);
//updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "0"
},
editurl: '../../Handler/JQGridHRHandler.ashx',
caption: 'Labor List',
shrinkToFit: true,
height: 'auto',
//autowidth: true,
xmlReader: {
root: "list",
row: "Response",
id: "cfgId",
repeatitems: false
},
beforeSelectRow: function (rowid, e)
{
var href = '../Tab_Pages/EmployeeTab.aspx?empcode=' + rowid;
window.open(href);
return false;
//var iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]);
//if (this.p.colModel[iCol].name === 'EMPCODE') {
// var param = { param: rowid };
// console.log(rowid);
// $.ajax({
// url: "LaborApproval.aspx/ShowMe",
// data: JSON.stringify(param),
// dataType: "json",
// type: "POST",
// contentType: "application/json; charset=utf-8",
// success: function (data) {
// console.log(data);
// var box = bootbox.dialog({
// show: true,
// message: data['d'],
// title: "Labour Details",
// buttons: {
// ok: {
// label: "OK",
// className: "btn-primary",
// callback: function() {
// console.log('OK Button');
// }
// }
// }
// });
// box.modal('show');
// },
// error: function (XMLHttpRequest, textStatus, errorThrown) {
// var err = eval("(" + XMLHttpRequest.responseText + ")");
// alert(err.Message)
// // console.log("Ajax Error!");
// }
// });
// return false;
//}
}
});
$('#grid-table-Labor').jqGrid('navGrid', '#grid-pager-Labor',
{
edit: false,
del: false,
search: true,
searchtext: "Search",
searchicon: 'ace-icon fa fa-search orange',
view: true,
viewtext: "View",
viewicon: 'ace-icon fa fa-search-plus grey',
},
{ //EDIT portion
//Can also set the width and height of the editing window as below commented way
//height: 300,
//width: 400,
//top: 50,
//left: 100,
//dataheight: 280,
closeOnEscape: true,//Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam',
{ datatype: 'json' }).trigger('reloadGrid');//Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam',
{ datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]
//Captures and displays the response text on th Edit window
}
},
editData: {
EmpId: function () {
var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
return value;
}
}
})
});
function updatePagerIcons(table) {
var replacement =
{
'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
})
}
function enableTooltips(table) {
$('.navtable .ui-pg-button').tooltip({ container: 'body' });
$(table).find('.ui-pg-div').tooltip({ container: 'body' });
}
function pickDate(cellvalue, options, cell) {
setTimeout(function () {
$(cell).find('input[type=text]')
.datepicker({ format: 'dd-mm-yyyy', autoclose: true });
}, 0);
}
var lastSelection;
function fontColorFormat(cellvalue, options, rowObject) {
var color = "blue";
var cellHtml = "<span style='color:" + color + "' originalValue='" + cellvalue + "'>" + cellvalue + "</span>";
return cellHtml;
}
function editRow(id) {
if (id && id !== lastSelection) {
var grid = $("#grid-table-Labor");
grid.jqGrid('restoreRow', lastSelection);
grid.jqGrid('editRow', id, { keys: true, focusField: 5 });
lastSelection = id;
}
}