Agregar botón a la barra de herramientas superior jqGrid

Parece que la barra de herramientas predeterminada para jqGrid siempre está en la parte inferior. Botones como la página Siguiente/Anterior y el menú desplegable para seleccionar el número de filas por página siempre aparecerán en la parte inferior de la cuadrícula.Agregar botón a la barra de herramientas superior jqGrid

Encontré una manera de agregar una barra de herramientas superior personalizada y presionar botones personalizados en ella.

Lo que realmente se necesita es una forma de agregar funcionalidad predeterminada (como paginación) a la parte superior de la cuadrícula, en lugar de la parte inferior.

Fuente

2010-04-20 Ron Harlev

No entiendo por qué es tan importante tener la barra de herramientas superior. ¿No usa paginación o tiene muchas filas en la cuadrícula, que no se puede ver la barra de herramientas inferior sin desplazarse? O hay otra razón?

Hay un parámetro booleano toppager de jqGrid (consulte setting options for the grid) para crear un buscapersonas adicional adicional. Puede ver una barra de herramientas en el parámetro de la barra de herramientas, pero no estoy seguro de que use la misma terminología que jqGrid. Mire la demostración en jqGrid Demos (expanda "Nuevo en la versión 3.1"). ¿Probablemente te refieres a una barra de navegación?

En general, jqGrid mostrará un fragmento HTML y dividirá todo con algunos elementos div predefinidos. La barra de navegación se colocará dentro del div con id = "pg_pager" y class = "ui-pager-control". Puede manipular jqGrid con respecto a jQuery, por ejemplo, para mover este div en el otro lugar. Si implementa dicho movimiento, debe volver a hacer esto cada vez que esté dentro del identificador del evento gridComplete (o después de que se dispare otro evento de finalización).

EDITADO: Es fácil mover un fragmento HTML existente a otro lugar con respecto a jQuery('#element_to_be_moved').insertAfter('#existing_element') o jQuery('#element_to_be_moved').insertBefore('#existing_element'). En jqGrid footer cells "inherits" CSS from cells in the main grid describí nombres de algunos div que son partes de jqGrid. Te deseo mucho éxito en la codificación.

Fuente

2010-04-21 00:59:25 Oleg

Oleg ... en cuanto a la demostración nuevo en la versión 3.1, que parece que no puede duplicar este ejemplo. ¿Dónde se define el DIV t_toolbar1? – Bean

@Bean: si entiendo correctamente tu pregunta, debes agregar la opción 'toolbar: [true," top "]' o 'toolbar: [true," both "]' a la grilla. Crea barras de herramientas * sobre * la grilla o * debajo * de la grilla. La identificación de la barra de herramientas superior se compilará a partir de "t_" y la grilla. La identificación de la barra de herramientas inferior será 'tb_' + gridid. – Oleg

Actualicé a jqgrid 3.7.2, con la esperanza de que su parámetro toppager ayudaría. Si bien coloca los controles de búsqueda en la parte superior, el botón de búsqueda no apareció durante el viaje.

// assuming a jqgrid with id='the_grid' 
$('#the_grid_pager_left').clone(true).insertBefore('#the_grid_toppager_center')

Lo anterior, con algunas modificaciones de menor importancia CSS, copiaron los botones de búsqueda/refresco en el toppager también, y conservan sus eventos/comportamientos.

Fuente

2010-09-14 22:02:44

goce:

$('#datagridnav').insertBefore('#t_datagrid'); //relocate footer to top

Fuente

2011-05-11 23:47:30

Para que la barra de herramientas en la parte superior de la rejilla con los mismos botones y eventos como la barra de herramientas inferior debe activar el toppager:true a la definición de la red y añadir las siguientes líneas después los definición

/** Duplicating the Nav Toolbar in top **/ 
var toolbarClone = $('#pager_left').clone(true); 
// Assuming that your grid's ID is myGrid 
$('#myGrid_toppager_left').prepend(toolbarClone);

Esas líneas harán el truco :)

Fuente

2012-08-08 07:46:52 abottoni

Agregar botón a la barra de herramientas superior jqGrid

Respuesta

Cuestiones relacionadas