如果单击开始编辑,如果在jqgrid中按下操作按钮,如何在视图模式下显示行

时间:2011-08-27 20:49:30

标签: jqgrid

jqGrid内联编辑在下面的onSelectRow事件中单击启动。 保存并取消操作按钮已打开。

保存或取消按钮单击不会以内联编辑结束。单击这些按钮后,行仍处于编辑模式。 看起来按钮点击导致onSelectRow事件重​​新启动内联编辑。

如何在单击保存或取消操作按钮时结束单击内联编辑?

$(function () {
    var grid = $("#grid");
    grid.jqGrid({
          colModel: [{"name":"_actions","width":45,"formatter":"actions",
          "formatoptions":{"keys":true,"delbutton":false,"afterSave":function (rowID, response) {
                  cancelEditing($('#grid'));
                  aftersavefunc(rowID, response);
            }
,"onError":errorfunc
,"onEdit":function (rowID) {
       if (typeof (lastSelectedRow) !== 'undefined' && rowID !== lastSelectedRow)
                       cancelEditing($('#grid'));
                       lastSelectedRow = rowID;
       }
}},
...
},

       onSelectRow: function (rowID) {
        lastSelectedRow = rowID;
    $("tr#" + lastSelectedRow + " div.ui-inline-edit, " + "tr#" + lastSelectedRow + " div.ui-inline-del").hide();
    $("tr#" + lastSelectedRow + " div.ui-inline-save, " + "tr#" + lastSelectedRow + " div.ui-inline-cancel").show();
    $("#grid").jqGrid('editRow', lastSelectedRow );
  }
}


function cancelEditing(myGrid) {
    if (typeof lastSelectedRow !== "undefined") {
        myGrid.jqGrid('restoreRow', lastSelectedRow);
  var lrid = lastSelectedRow;
  $("tr#" + lrid + " div.ui-inline-edit").show();
  $("tr#" + lrid + " div.ui-inline-save, " + "tr#" + lrid + " div.ui-inline-cancel").hide();
    }
}
}

更新

网格包含工具栏中的复选框,可切换单击编辑模式以快速输入数据(自动编辑):

            onSelectRow: function (rowID) {
              if (!autoedit) {
                if (typeof (lastSelectedRow) !== "undefined" && lastSelectedRow !== rowID)
                  cancelEditing ($(this));
                  return;
                  }
                  beginInlineRowEdit(rowID);
             },

即使在此模式下,也可以选择文本并将其复制到剪贴板。问题是在单击模式下单击保存并取消按钮不会终止内联编辑,可能此单击被解释为开始编辑命令。如果单击操作列,如何签入onSelectRow,在这种情况下不启动内联编辑,使操作列不能开始内联编辑或其他想法?

UPDATE2

我试过

           beforeSelectRow: function (rowID,e) {
            alert( $(e.target).html());

}

如果单击编辑按钮消息框为空。如果点击外部复选框复选标记列,它也是空的。如果点击外部编辑按钮它包含整个网格html。 如何确定点击操作栏?

更新3

正如奥列格建议我试过

beforeSelectRow: function (rowID,e) { 
   if (!jqgrid_beforeSelectRow( rowID, e)) return false;
   beginInlineEdit(rowID, aftersavefunc );
   return true;
              }


function beginInlineEdit(rowID, afterSave) {
    var grid2 = $("#grid");
    if (rowID && rowID !== lastSelectedRow) {
        var scrollPosition = $("#grid").closest(".ui-jqgrid-bdiv").scrollLeft();
        cancelEditing($("#grid"));
        lastSelectedRow = rowID;
        setTimeout(function () {
            grid2.closest(".ui-jqgrid-bdiv").scrollLeft(scrollPosition);
        }, 100);
    }
    $("tr#" + lastSelectedRow + " div.ui-inline-edit, " + "tr#" + lastSelectedRow + " div.ui-inline-del").hide();
    $("tr#" + lastSelectedRow + " div.ui-inline-save, " + "tr#" + lastSelectedRow + " div.ui-inline-cancel").show();

    $("#grid").jqGrid('editRow', lastSelectedRow, true, null, null, null,
                 { _dokdata: FormData },
                 afterSave,
                 errorfunc,
                 function () {  // afterrestorefunc
                     cancelEditing($("#grid"));
                     setFocusToGrid();
                 }
             );
}

jqgrid_beforeSelectRow = function (rowID, e) {
    if ($(e.target).hasClass('ui-icon-cancel')) { return false; }
    if ($(e.target).hasClass('ui-icon-disk')) { return false; }
    if (typeof (lastSelectedRow) !== "undefined" && lastSelectedRow !== rowID)
      cancelEditing($("#grid"));
    return true;
}

function cancelEditing(myGrid) {
    if (typeof lastSelectedRow !== "undefined") {
        myGrid.jqGrid('restoreRow', lastSelectedRow);
        restoreActionsIcons();
    }
}

使用常规双击开始编辑。在产品网格中,第一行编辑按钮仅在第一次启动edi。按下保存按钮后,编辑按钮中的剩余点击将被忽略,内联编辑不会启动。仅当产品表中的第一行时才会发生这种情况。在底行中,编辑可以多次启动。如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

如果我理解你的问题是正确的,那么用户必须在选择行后按Esc,或者如果用户不想编辑该行,请单击“取消”操作按钮。

我以前使用的网格不仅可以用于编辑,还可以用于查看。所以我个人更喜欢使用ondblClickRow而不是onSelectRow来进入内联编辑模式。在用户可以选择或只是单击行或从网格中复制到剪贴板的一些数据的情况下。如果用户需要编辑行,则用户可以使用双击操作按钮。