jqGrid Reposicionar Eliminar Cuadro de confirmación

Actualmente estoy usando jqGrid con navGrid, del set en verdadero. El problema es cuando un usuario hace clic en eliminar, aparece un cuadro de confirmación en la esquina superior izquierda de la cuadrícula. Como ya estamos desplazados hacia abajo hasta la parte inferior, que tengo una gran altura, el usuario tiene que ir hasta la parte superior para confirmar. ¿Hay alguna forma de mover la posición de esto? Una compensación manual está bien, pero idealmente quiero acoplarla en la parte inferior izquierda, como en la parte superior izquierda.jqGrid Reposicionar Eliminar Cuadro de confirmación

Gracias de antemano

(Si se trata de una víctima lo siento. Traté simple publicación de ella, pero me dio un error extraño y no aparece en mi historia por lo que asume que no publicó.)

Fuente

2011-04-19 Anthony Greco

Creo que no es un engaño. Por el contrario, me parece bien, así que +1 de mí.

El jqGrid utiliza internamente el método viewModal ($.jgrid.viewModal) que muestra la mayoría de los cuadros de diálogo. El método tiene el parámetro toTop, pero delGridRow y editGridRow no lo usan y se establecerá en toTop:true. Por lo tanto, los cuadros de diálogo Agregar, Editar y Eliminar aparecerán siempre en la parte superior de la cuadrícula, que puede estar dentro del área inviable.

Para solucionar el problema, puede definir el identificador de evento afterShowForm que cambia la posición del diálogo. Por ejemplo

$("#list").jqGrid('navGrid','#pager', {}, {}, {}, 
        { 
         afterShowForm: function($form) { 
          var dialog = $form.closest('div.ui-jqdialog'), 
           selRowId = myGrid.jqGrid('getGridParam', 'selrow'), 
           selRowCoordinates = $('#'+selRowId).offset(); 
          dialog.offset(selRowCoordinates); 
         } 
        });

En el ejemplo, el cuadro de diálogo se colocará sobre la fila seleccionada. El código se puede mejorar para el caso cuando la fila seleccionada en la última fila y la parte inferior del diálogo está fuera de la ventana. Sin embargo, la implementación anterior me parece mejor que la predeterminada porque el usuario ve el diálogo exactamente sobre la fila que desea eliminar y puede mover el diálogo para que esté completamente visible.

Puede probar el movimiento sugerido del cuadro de diálogo Eliminar en the live demo.

Fuente

2011-04-19 17:46:55 Oleg

Todavía tengo que agregarlo a mi codificación, pero en la demostración parece ser lo que necesito. Muchas gracias! –

La demostración ya no parece funcionar. El formulario aún aparece en la parte superior. ¿Me estoy perdiendo de algo? – devXen

@Chensformers: ¿Qué navegador web usaste para la prueba? Intente reproducir su prueba una vez más: 1) abra la demostración; 2) seleccione una fila cerca de la parte inferior de la cuadrícula para que pueda ver la barra de navegación (por ejemplo, seleccione el número de fila 290) 3) haga clic en el botón "Eliminar" 4) verifique que aparezca el cuadro de diálogo "Eliminar" ** debajo la fila seleccionada ** (debajo de la fila número 290). Si uno no usa el 'afterShowForm' de mi respuesta, entonces el cuadro de diálogo Eliminar se mostrará en la parte superior de la cuadrícula en lugar de debajo de la fila seleccionada. – Oleg

Encontrado algo mejor here!

añadir esto en su librería javascript:

jQuery.fn.center = function() { 
    this.css("position","absolute"); 
    this.css("top", ($(window).height() - this.height())/2+$(window).scrollTop() + "px"); 
    this.css("left", ($(window).width() - this.width())/2+$(window).scrollLeft() + "px"); 
    return this; 
}

Ahora sólo tiene que añadir esto en la propiedad afterShowForm:

afterShowForm: function(form) { 
    form.closest('div.ui-jqdialog').center(); 
}

form.closest ('div.ui-jqdialog') = > le permiten obtener la ventana emergente modal, no es necesario precisar si se trata de un editForm o un deleteForm.

Este código coloca la ventana emergente en el centro de la pantalla, por lo que no tiene que desplazarse si tiene una cuadrícula realmente grande.

Fuente

2012-04-26 14:38:57

jqGrid Reposicionar Eliminar Cuadro de confirmación

Respuesta

Cuestiones relacionadas