jquery的新手，并尝试使用jqgrid进行单元格编辑功能，但无法理解如何在编辑时实现验证单元格数据，如果失败则还原为原始值。这是我目前所在的地方......
function goalsTable(dept, team, goal, effDt) {
var grid = $('#tblEmployeeGoals');
$('#tblEmployeeGoals').jqGrid(
{
url: "api/data/GetEmployeeGoals_DT?dep=" + dept + "&team=" + team + "&goal=" + goal + "&effdt=" + effDt,
datatype: "json",
loadonce: true,
gridview: true,
autoencode: true,
viewrecords: true,
colNames: ["Name",
"Payroll Id",
"Goal Name",
"Effective Date",
"Amount",
"empgoalid",
"Team",
"Comments",
"departmentid",
"goaltypeid",
],
colModel: [
{ name: "name", index: "Name", "hidden": false, editable: true, edittype: "text" }
, { name: "payrollid", index: "Payroll Id", "hidden": true, editable: false }
, { name: "goalname", index: "Goal Name", "hidden": false, editable: false }
, { name: "effDate", "hidden": false, editable: false }
, { name: "goalval", "hidden": false, editable: true}
, { name: "empgoalId", "hidden": true, editable: false }
, { name: "primarysupervisor", "hidden": true, editable: false }
, { name: "comments", "hidden": false, editable: true }
, { name: "departmentid", "hidden": true, editable: false }
, { name: "goaltypeid", "hidden": true, editable: false }
]
, cellEdit: true, // TRUE = turns on celledit for the grid.
cellsubmit: 'clientArray',
editurl: 'clientArray',
beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
//was thinking I could get the original value before editing
// and if validation fails then replace the new value with this original
origval = value;
orow = iRow;
ocol = iCol;
},
beforeSaveCell: function (rowid, cellname, value, iRow, iCol) {
//check value before committing it
if (cellname = "goalval") {
if (!validateData("number", value) ) {
grid.jqGrid('restoreCell', iRow, iCol, true);
}
}
}
});
}
答案 0 :(得分：0)
另一位开发人员和我通过使用一个行数据对象数组的全局变量来解决这个问题。
当用户编辑行时，会触发drawCallBack。在这里，我们将行数据值加载到一个对象中，并检查数组中是否存在keyval（payrollid）。如果是，那么我们用新的val更新数组对象，否则我们将对象添加到数组。
这样当用户按下更新时，我们传递的数组对象只包含发生了更改的行。
$( '#tblEmpGoal' ).show();
var EGtble = $( '#tblEmployeeGoals' ).dataTable
(
{
processing: true,
responsive: false,
destroy: true,
filter: false,
ajax: "api/data/GetEmployeeGoals_DT?dep=" + dept + "&team=" + team + "&goal=" + goal + "&effdt=" + effDt
, drawCallback: function ()
{
$( '#tblEmployeeGoals tbody td:nth-child(4),td:nth-child(5)' ).editable(
function ( cellVal )
{
if ( cellVal != this.revert )
{
// currentCellObject = $( this );
ind = $( this ).index()
//Validate amount is a numeric value
if ( ind == 3 )
{
var isNum = validateData( "number", cellVal );
//amtCellVal = cellVal;
if ( !isNum )
{
$( '#error' ).html( "<strong> ! Please enter a numeric value.</strong>" ).show();
setTimeout( function ()
{
$( "#error" ).fadeOut();
}, 4000 );
return false;
}
}
var row = $( this ).closest( 'tr' );
row[0].cells[2].innerHTML = $( '#EGEffectiveDateInput' ).val();
//Highlight cell to show edit
$( this ).addClass( 'red' );
//Get visible value
// alert( cellVal );
//Get invisible column historical values using the old .dataTable library
var rowData = EGtble.fnGetData( EGtble.fnGetPosition( this )[0] );
tmg = new Object();
tmg.payrollid = rowData.payrollid;
tmg.departmentid = rowData.departmentid;
tmg.goaltypeid = rowData.goaltypeid;
tmg.goalname = rowData.goalname;
tmg.empgoalId = rowData.empgoalId;
tmg.primarysupervisor = rowData.primarysupervisor;
tmg.name = rowData.name;
var effectDate = $( '#EGEffectiveDateInput' ).val();
if ( effectDate != rowData.effDate )
tmg.effDate = effectDate;
else
tmg.effDate = rowData.effDate;
//Edit the Amount and Comments columns and effective date
if ( tmgArray.length > 0 )
{
doPush = true;
for ( i = 0; i < tmgArray.length; i++ )
{
if ( tmgArray[i].payrollid == rowData.payrollid )
{
doPush = false;
if ( ind == 3 )
{
tmgArray[i].goalval = cellVal;
}
else if ( ind == 4 )
{
tmgArray[i].comments = cellVal;
}
//check if the date changed and update this field as well
var effectDate = $( '#EGEffectiveDateInput' ).val();
if ( effectDate != tmgArray[i].effDate )
tmgArray[i].effDate = effectDate;
//else
// tmgArray[i].effDate = rowData.effDate;
} //endif
} //end for
} //end if len array > 0
else
{
doPush = true;
}
//if a matching payroll Id not found in existing array or array is empty we add new row
if ( doPush )
{
if ( ind == 3 )
{
tmg.goalval = cellVal;
tmg.comments = rowData.comments;
}
else if ( ind == 4 )
{
tmg.comments = cellVal;
tmg.goalval = rowData.goalval;
}
tmgArray.push( tmg );
}
}
else
{
cellVal = this.revert;
}
return cellVal;
},
{
"placeholder": ""
, "callback": function ( sValue, y )
{
// Redraw the table from the new data on the server */
console.log( sValue );
// EGtble.draw( true );
}
, onblur: 'submit'
// }
} );
}
, columns: [
{ data: "name", "title": "Name", "visible": true }
, { data: "payrollid", "title": "Date", "visible": false }
, { data: "goalname", "title": "Goal Type", "visible": true }
, { data: "effDate", "title": "Effective Date", "visible": true }
, { data: "goalval", "title": "Amount", "visible": true }
, { data: "empgoalId", "title": "Employee Goal ID", "visible": false }
, { data: "primarysupervisor", "title": "Team", "visible": false }
, { data: "comments", "title": "Comments", "visible": true }
, { data: "departmentid", "title": "Department", "visible": false }
, { data: "goaltypeid", "title": "Goal Type Id", "visible": false }
],
columnDefs: [{
render: function ( data, type, row )
{
var selectedDate = new Date( data );
return ( ( selectedDate.getMonth() + 1 ) + '/' + selectedDate.getDate() + '/' + selectedDate.getFullYear() );
},
targets: [3]
}]
} );