我在我的网格中有一个简单的内联编辑，我想在用户从文本框跳出标签时提交更改。 jqGrid 的默认行为强制用户按“Enter”来提交更改，但这对我们的用户来说是不直观的。
onSelectRow: function(id) {
$(gridCoreGroups).editRow(id, true, undefined, function(response)
{
alert("hello world");
}
}
我已经完成了提供的事件，但它们都是由于用户按下“Enter”而发生的，我想避免这种情况。当用户关闭此单元格时，我可以连接一些东西来触发操作吗？
【问题讨论】：
标签： javascript jquery asp.net-mvc jqgrid
对于在线编辑，您可以通过多种方式完成此操作。要使用 onSelectRow 触发器将 onblur 事件绑定到输入字段，从而无需编辑和保存按钮，请执行以下操作：
$('#gridId').setGridParam({onSelectRow: function(id){
//Edit row on select
$('#gridid').editRow(id, true);
//Modify event handler to save on blur.
var fieldName = "Name of the field which will trigger save on blur.";
//Note, this solution only makes sense when applied to the last field in a row.
$("input[id^='"+id+"_"+fieldName+"']","#gridId").bind('blur',function(){
$('#gridId').saveRow(id);
});
}});
要将 jQuery 实时事件处理程序应用于可能出现在一行中的所有输入（jqGrid 将所有输入标记为 rowId_fieldName ），循环抛出网格中的行数并执行以下操作：
var ids = $("#gridId").jqGrid('getDataIDs');
for(var i=0; i < ids.length; i++){
fieldName = "field_which_will_trigger_on_blur";
$("input[id^='"+ids[i]+"_"+fieldName+"']","#gridId").live('blur',function(){
$('#gridId').jqGrid('saveRow',ids[i]);
});
}
注意： 要像上面那样在 .live() 中使用 blur，您需要 jQuery 1.4 或位于以下位置的补丁： Simulating "focus" and "blur" in jQuery .live() method
小心使用 rowId。当您开始对行进行排序、添加和删除时，您可能会发现自己编写了一些棘手的 jQuery 来将行 ID 转换为 iRows 或行号。
如果您像我一样使用单独的单元格编辑，您需要修改 afterEditCell 触发器，如下所示：
$('#gridId').setGridParam({afterEditCell: function(id,name,val,iRow,iCol){
//Modify event handler to save on blur.
$("#"+iRow+"_"+name,"#gridId").bind('blur',function(){
$('#gridId').saveCell(iRow,iCol);
});
}});
希望对您有所帮助..
【讨论】：
这非常可怕，但这是我对这个问题的看法，并且可能更容易和更通用 - 当项目失去焦点时，它会以编程方式按 Enter :)
afterEditCell: function() {
//This code saves the state of the box when focus is lost in a pretty horrible
//way, may be they will add support for this in the future
//set up horrible hack for pressing enter when leaving cell
e = jQuery.Event("keydown");
e.keyCode = $.ui.keyCode.ENTER;
//get the edited thing
edit = $(".edit-cell > *");
edit.blur(function() {
edit.trigger(e);
});
},
将该代码添加到您的 jqgrid 设置代码中。
假设最后编辑的项目是唯一以 .edit-cell 作为父 td 的项目。
【讨论】：
我的解决方案是使用独立于网格的基本 jQuery 选择器和事件来检测此事件。我使用网格中文本框上的实时和模糊事件来捕获事件。这两个事件不支持相互结合，所以这个 hack 最终成为了解决方案：
【讨论】：
我知道这个问题很老但是答案已经过时了。
必须创建一个名为 lastsel 的全局变量，并将以下内容添加到 jqGrid 代码中
onSelectRow: function (id) {
if (!status)//deselected
{
if ($("tr#" + lastsel).attr("editable") == 1) //editable=1 means row in edit mode
jQuery('#list1').jqGrid('saveRow', lastsel);
}
if (id && id !== lastsel) {
jQuery('#list1').jqGrid('restoreRow', lastsel);
jQuery('#list1').jqGrid('editRow', id, true);
lastsel = id;
}
},
【讨论】：
我遇到了同样的问题并尝试了上面的答案。最后，我采用了一种解决方案，即在用户离开选项卡时插入“Enter”键。
// Call this function to save and unfinished edit
// - If an input exists with the "edit-call" class then the edit has
// not been finished. Complete the edit by injecting an "Enter" key press
function saveEdits() {
var $input = $("#grid").find(".edit-cell input");
if ($input.length == 1) {
var e = $.Event("keydown");
e.which = 13;
e.keyCode = 13;
$input.trigger(e);
}
}
【讨论】：
使用 CellSelect 代替 selectRow。
onCellSelect: function (row, col, content, event) {
if (row != lastsel) {
grid.jqGrid('saveRow', lastsel);
lastsel = row;
}
var cm = grid.jqGrid("getGridParam", "colModel");
//keep it false bcoz i am calling an event on the enter keypress
grid.jqGrid('editRow', row, false);
var fieldName = cm[col].name;
//If input tag becomes blur then function called.
$("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('blur',function(e){
grid.jqGrid('saveRow', row);
saveDataFromTable();
});
//Enter key press event.
$("input[id^='"+row+"_"+fieldName+"']","#gridId").bind('keypress',function(e){
var code = (e.keyCode ? e.keyCode : e.which);
//If enter key pressed then save particular row and validate.
if( code == 13 ){
grid.jqGrid('saveRow', row);
saveDataFromTable();
}
});
}
//saveDataFromTable() 是验证我的数据的函数。
【讨论】：