Cómo mostrar la fila en el modo de vista si se presiona el botón de acción en jqgrid si un solo clic comienza a editar

La edición en línea de jqGrid comienza en un solo clic en el evento onSelectRow a continuación. Los botones de acción Guardar y Cancelar están activados.

El clic en el botón Guardar o cancelar no finaliza la edición en línea. La fila permanece en modo de edición después de hacer clic en esos botones. Parece que el clic del botón provoca el evento onSelectRow que reinicia la edición en línea.

¿Cómo finalizar la edición en línea con un solo clic en el botón de acción para guardar o cancelar?

$(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();
    }
}
}

actualización

La cuadrícula contiene una casilla de verificación en la barra de herramientas que alterna el modo de edición con un solo clic para la entrada rápida de datos (edición automática):

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

Incluso en este modo, el texto se puede seleccionar y copiar al portapapeles. El problema es que en el modo de un solo clic, hacer clic en el botón Guardar y cancelar no finaliza la edición en línea, tal vez este clic se interprete como un comando de inicio de edición. ¿Cómo verificar onSelectRow si se hace clic en la columna de acción y no iniciar la edición en línea en este caso, haciendo que la columna de acción no comience la edición en línea u otra idea?

update2

Lo intenté

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

}

Si se hace clic en el cuadro de mensaje del botón de edición, está vacío. También está vacío si se hace clic fuera de la columna de la casilla de verificación. Si se hace clic fuera del botón de edición, contiene HTML de cuadrícula completo. ¿Cómo dedect hacer clic en la columna de acción?

actualización 3

Como sugirió Oleg, intenté

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();
    }
}

Usando un doble clic regular para comenzar a editar. En la cuadrícula de productos, el botón de edición de la primera fila comienza a editar solo la primera vez. después de presionar el botón Guardar, los clics restantes en el botón Editar se ignoran, la edición en línea no comienza. Esto sucede solo si las primeras filas en la tabla de productos. En las filas inferiores, la edición se puede iniciar varias veces. Cómo arreglar esto ?

preguntado el 27 de agosto de 11 a las 20:08

1 Respuestas

Si entiendo que su pregunta es correcta, el usuario debe presionar Esc después de seleccionar la fila o hacer clic en el botón de acción "Cancelar" si el usuario no desea editar la línea.

Solía ​​usar cuadrículas que se usarán no solo para editar, sino más para ver. Por eso prefiero usar personalmente ondblClickRow en lugar de onSelectRow para entrar en el modo de edición en línea. En el caso de que el usuario pueda seleccionar o simplemente hacer clic en la fila o hacer una copia en el portapapeles algunos datos de la cuadrícula. Si el usuario necesita editar la fila, el usuario puede hacer doble clic en los botones de acción.

Respondido 28 ago 11, 01:08

Gracias. Actualicé la pregunta. Estoy experimentando con el modo de edición de un solo clic para ver si es razonable. Aumenta la velocidad de entrada de datos al ahorrar una gran cantidad de clics del mouse. - Andrus

@Andrus: No entiendo bien los efectos que describiste, pero supongo que debes implementar algunas comprobaciones dentro de beforeSelectRow controlador de eventos que tiene e como segundo parámetro. e.target es la celda<td>) o su elemento hijo en el que se hace clic. Puedes regresar false si desea evitar la selección de filas. Por cierto, puede mover el código que tiene actualmente en onSelectRow dentro beforeSelectRow. En el caso tendrá la información adicional (e.target) que puede utilizar. - Oleg

@Andrus: puede hacer lo siguiente if ($(e.target).hasClass('ui-icon-cancel')) { return false;} para evitar la selección de la fila si se hace clic en el botón de acción "Cancelar". - Oleg

@Andrus: En mis pruebas haciendo clic en discapacitados control como casilla de verificación para discapacitados no hace nada. Algunos navegadores (IE) hacen doble clic en los elementos deshabilitados. Solo haciendo clic afuera del elemento deshabilitado, pero dentro de la celda se activará definitivamente el evento de clic. Tu problema original era el haciendo clic en el botón de acción. ¿Por qué examina el clic de los elementos deshabilitados? - Oleg

@Andrus: Si realmente necesita tener el comportamiento, hacer clic en la casilla de verificación deshabilitada debería iniciar la edición en línea. no usar casilla de verificación deshabilitada en el caso. En lugar de eso, puede guardar la imagen de la casilla de verificación y usar un formateador personalizado para mostrar la pseudo casilla de verificación. Probablemente hay algún otro truco de cómo decir navegador para llamar click controlador de eventos en el control deshabilitado, pero no lo sé. - Oleg

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.