1
我正在使用上面的查看數據和編輯它。第一行用於編輯按鈕，但每當我點擊保存按鈕，我無法捕捉該事件。JQgrid內聯編輯與asp.net和C＃
我想知道它是如何工作的，以及如何調用AJAX函數將數據存儲到SQL Server。
$(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 JS - V5.0.2 –
您使用的jqGrid Guriddo。你可以使用前面的帖子中描述的serializeRowData嗎？ –
可否請給我一個示例代碼鏈接 –