2011-02-07 12 views
22

Cuando uso $('#mygrid').jqGrid('GridUnload'); mi cuadrícula se destruye: sin buscapersonas/sin encabezado.jqGrid GridUnload/GridDestroy

En un wiki que encontré:

La única diferencia con el método anterior es que la red se destruye, pero el elemento mesa y buscapersonas (si los hay) se deja listo para ser utilizado de nuevo.

No encuentro ninguna diferencia entre GridUnload/GridDestroy o hago algo mal?

Yo uso jqGrid 3.8.

Respuesta

57

Para poder crear jqGrid en la página, debe insertar un elemento <table> vacío en el lugar de la página donde desea ver la cuadrícula. El ejemplo más simple del elemento de tabla es <table id="mygrid"></table>. Se creará

El <table> elemento vacío en sí será no se ve en la página hasta que llame $('#mygrid').jqGrid({...}) y los elementos de la red, como los encabezados de columna.

El método GridDestroy funciona como jQuery.remove. Es elimina todos los elementos que pertenecen a la cuadrícula inclusve elemento <table>.

El método GridUnload por el contrario borrar todo, pero el elemento vacío <table> permanecer en la página. Entonces puede crear una nueva grilla en el mismo lugar. El método GridUnload es muy útil si necesita crear en un lugar diferentes grillas dependen de diferentes condiciones. Mire the old answer con the demo. La demostración muestra cómo dos redes diferentes pueden crearse dinámicamente en el mismo lugar. Si simplemente reemplazara GridUnload en el código GridDestroy, la demostración no funcionará: después de destruir la primera cuadrícula, no se crearán otras cuadrículas en el mismo lugar.

+0

Una pregunta más: Hay un funktion de espera/pausa/tiempo de espera, hasta que un php-script haya hecho su trabajo (en mi script crear un pdf y hacer algunos mysql-querys). el .delay (de jquery) parece no funcionar. Cualquier idea y VIELEN VIELEN DANK (para la comunidad: Oleg habla alemán ;-) – Scharlotte

+0

Gracias Oleg otra vez! Mi problema es que jqgrid es más rápido que php-Skript. Quiero retrasar la ejecución del funktion createmygrid() como en tu ejemplo. – Scharlotte

+0

funcionó perfectamente gracias –

7

Además de la respuesta de Oleg, me gustaría señalar que GridUnload hace un poco más que simplemente eliminar la cuadrícula de la tabla. Quita el elemento original de la tabla HTML (y el buscapersonas) y publica anuncios idénticos en su lugar (al menos en 4.5.4 lo hace).

Esto significa que si conectó algunos controladores de eventos al elemento HTML de la tabla (es decir, con jquery activado, like ('#gridID'). On ('evento', 'selector', controlador)) también se eliminarán . De manera consigna, los eventos no se dispararán en la nueva cuadrícula si reemplaza la cuadrícula anterior por una nueva ...

1

La respuesta de Oleg funciona bien siempre que no tenga encabezados de Grupo.

Cuando agrego fila de encabezado de grupo con

los resultados de un 'GridUnload' seguido '' setGroupHeaders por un $ ('# mygrid'). JqGrid ({...}) no son consistentes

Funciona bien en Chrome, pero no en IE11.

En IE11, cada elemento 'jqg-third-row-header' termina representado en filas diferentes (en diagonal).

Estoy usando free-jqGrid: query.jqgrid.src.js versión 4.13.4 para la depuración. tracé el problema a código, en este archivo, que comienza con la línea 9936:

if (o.useColSpanStyle) { 
    // Increase the height of resizing span of visible headers 
    $htable.find("span.ui-jqgrid-resize").each(function() { 
     var $parent = $(this).parent(); 
     if ($parent.is(":visible")) { 
      this.style.cssText = "height:" + $parent.height() + "px !important; cursor:col-resize;"; 
      //this.style.cssText = "height:" + $parent.css('line-height'); + "px !important;cursor:col-resize;"; 
     } 
    }); 
    // Set position of the sortable div (the main lable) 
    // with the column header text to the middle of the cell. 
    // One should not do this for hidden headers. 
    $htable.find(".ui-th-column>div").each(function() { 
     var $ts = $(this), $parent = $ts.parent(); 
     if ($parent.is(":visible") && $parent.is(":has(span.ui-jqgrid-resize)") && !($ts.hasClass("ui-jqgrid-rotate") || $ts.hasClass("ui-jqgrid-rotateOldIE"))) { 
      // !!! it seems be wrong now 
      $ts.css("top", ($parent.height() - $ts.outerHeight(true))/2 + "px"); 
      // $ts.css("top", ($parent.css('line-height') - $ts.css('line-height'))/2 + "px"); 
     } 
    }); 
} 
$(ts).triggerHandler("jqGridAfterSetGroupHeaders"); 
}); 

Este código establece la altura y valores CSS superiores relacionados con cada tema 'JQG-tercera fila de cabecera'. Esto conduce a un diseño alto y diagonal del 'jqg-tercera-fila-encabezado'
Posible error:.

Los métodos $ parent.height() y $ ts.height(), arriba, devuelven la altura anterior de la tabla jqGrid en IE11. En Chrome devuelven la 'th' altura calculada (arriba = 0). He añadido y probado las 2 líneas comentadas que usan line-height. IE11 funciona bien cuando se usa la altura de línea. No entiendo completamente la lógica de cambio de tamaño de JqGrid, por lo que puede no ser una solución.
solución alternativa:

Si especifica.

colModel: 
    { 
    label: 'D', 
    name: 'W', 
    width: 6, 
    align: 'center', 
    resizable:false //required for IE11 multiple calls to this init() 
    }, 

Cuando tamaño variable es falso que el código anterior no se encuentra y la altura y la parte superior no están ajustadas.
Oleg's jqGrid es un control muy agradable. Tal vez pueda probar su grilla de demostración con un encabezado de grupo en IE11.