问题
I am using the inlineNav option of jqgrid to add a 'add' option to the toolbar. I am also using a actions formatter for edit and delete. When I add a new row, the newly added row has an edit icon and a cancel icon, whereas the save icon is on the toolbar next to the add.
Is there a way to specify that the newly added row have a save and cancel icon instead of having the edit icon?
回答1:
In case anyone has a similar question.
I ended up rolling my own formatter.
inlineNavAction = function(cellvalue, options, rowObject, isSavedRow){
if(isSavedRow !== true){
var rowid = options.rowId;
var ocl = "id='jSaveButton_"+rowid+"' onclick=jQuery.fn.fmatter.rowactions.call(this,'save'); onmouseover=jQuery(this).addClass('ui-state-hover'); onmouseout=jQuery(this).removeClass('ui-state-hover'); ";
var str = "<div title='"+$.jgrid.edit.bSubmit+"' style='float:left;' class='ui-pg-div ui-inline-save' "+ocl+"><span class='ui-icon ui-icon-disk'></span></div>";
ocl = "id='jCancelButton_"+rowid+"' onclick=jQuery.fn.fmatter.rowactions.call(this,'cancel'); onmouseover=jQuery(this).addClass('ui-state-hover'); onmouseout=jQuery(this).removeClass('ui-state-hover'); ";
str += "<div title='"+$.jgrid.edit.bCancel+"' style='float:left;margin-left:5px;' class='ui-pg-div ui-inline-cancel' "+ocl+"><span class='ui-icon ui-icon-cancel'></span></div>";
return "<div style='margin-left:8px;'>" + str + "</div>";
}else{
return $.fn.fmatter.actions(cellvalue, options, rowObject);
}
}
isSavedRow is passed as true in the case of the formatter being called again after a row has been saved due to being added. I also default the rowId to 0. Pass false for default operation. I took the markup for save and cancel from the source available on github for version 4.5
Usage:
formatter: function(cellvalue,options,rowObject) {
return inlineNavAction(cellvalue,options,rowObject, (options.rowId!='new_row'));
}
The new_row in
(options.rowId!='new_row')
is whatever you have set as the default rowId for an added row. new_row is the default.
回答2:
Change the formatter
of the action
column to:
formatter: function (cellvalue, options, rowObject) {
if (cellvalue === undefined && options.rowId === "_empty") {
// remove edit and del buttons
options.colModel.formatoptions.editbutton = false;
options.colModel.formatoptions.delbutton = false;
}
return $.fn.fmatter.actions(cellvalue, options, rowObject);
},
and then in addParams
of inlineNav
we have:
addParams: {
position: "last",
rowID: '_empty',
useDefValues: true,
addRowParams: {
url: '....',
key: true,
restoreAfterError: false,
oneditfunc: function(rowId) {
// display the save and cancel buttons
$("#jSaveButton_" + rowId).show();
$("#jCancelButton_" + rowId).show();
},
// ... the rest
},
来源:https://stackoverflow.com/questions/19287537/jqgrid-inlinenav-add-show-save-icon-on-added-row