我正在使用 jqgrid 的 inlineNav 选项向工具栏添加“添加”选项。我还在使用操作格式化程序进行编辑和删除。当我添加新行时,新添加的行有一个编辑图标和一个取消图标,而保存图标位于添加旁边的工具栏上。
有没有办法指定新添加的行有一个保存和取消图标而不是编辑图标?
我正在使用 jqgrid 的 inlineNav 选项向工具栏添加“添加”选项。我还在使用操作格式化程序进行编辑和删除。当我添加新行时,新添加的行有一个编辑图标和一个取消图标,而保存图标位于添加旁边的工具栏上。
有没有办法指定新添加的行有一个保存和取消图标而不是编辑图标?
万一有人有类似的问题。
我最终推出了自己的格式化程序。
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 在由于添加而被保存后再次调用格式化程序的情况下传递为 true。我还将 rowId 默认为 0。为默认操作传递 false。我从 github 上 4.5 版的可用源中获取了保存和取消的标记
用法:
formatter: function(cellvalue,options,rowObject) {
return inlineNavAction(cellvalue,options,rowObject, (options.rowId!='new_row'));
}
中的新行
(options.rowId!='new_row')
是您为添加的行设置的默认 rowId。new_row 是默认值。
formatter
将列的更改action
为:
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);
},
然后我们有addParams
:inlineNav
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
},