tag - jquery this type of element

¿Por qué se usa gridview: true y qué significa?

Question

Estoy trabajando en JqGrid.

Quiero saber qué significa si especificamos gridview:true .

¿Y en qué casos debemos proporcionarlo?

Hace poco estaba trabajando en uno de estos jqGrid y mi afterInsertRow no se llamaba, una vez que eliminé el gridview:true ahora que se realizó la llamada.

Este es un caso que yo mismo experimenté, me preguntaba si también hay otros casos que deberíamos saber si se usa gridview:true .

Por favor guíame en esto.

Answer 1

Acepto que la opción gridview: true no está bien explicada en la documentación. En algunos casos (como en el caso de TreeGrid) la opción se establecerá automáticamente. Así que trato de explicar lo que significa y por qué recomiendo siempre utilizar la opción gridview: true y nunca usar afterInsertRow .

Muchas personas comienzan con otros lenguajes de programación como JavaScript y escriben su primer programa que se ejecuta en el navegador web después de que tienen algún estilo de escritura de programas. Tuve el mismo problema 3 años antes. Es importante entender qué debe hacer el navegador web después de realizar algunos cambios en la página HTML . En el uso del uso de jQuery, es lo que haces permanentemente.

Si cambia algún elemento DOM en la página, se puede cambiar la posición en todos los otros elementos DOM existentes en la página. Si piensa en el modelo flotante (como con float: left ) o en muchos otros ajustes de CSS, comprenderá que el navegador web no puede mover la representación de mapa de bits de la página existente e insertar el nuevo elemento insertado. Por lo tanto, el navegador web debe volver a calcular la posición de todos los elementos existentes en la página y mover algunos de los elementos en otro lugar . Incluso si cambia el estilo CSS de un elemento, se produce el llamado reflujo. Te recomiendo que leas el artículo y mires el video sobre el tema.

La idea principal para mejorar el rendimiento del navegador web en el caso descrito anteriormente será reducir el número de cambios en la página. Entonces, ¿necesita cambiar 5 estilos de un elemento DOM? Debe hacerlo en una sola operación. Puede usar jQuery.css({...}) con todos los estilos modificados en lugar de 5 llamadas separadas. Aún mejor podría ser definir una clase CSS y usar el método jQuery.addClass .

En el caso de jqGrid uno debe completar <tbody> con todas las filas y celdas de la grilla. Si usa la opción gridview: true , jqGrid recopila el contenido de todas las filas como cadenas con fragmentos de HTML. Más tarde, jqGrid llama a jQuery.append en la línea que establece internamente la propiedad innerHTML para establecer todo el fragmento de HTML en la página.

Por la misma razón, debe usar cellattr , rowattr o personalizados que funcionen con fragmentos de HTML y representen las celdas o filas como cadenas . Al final, las cadenas se agregarán a otras cadenas y se usarán en la operación jQuery.append como describí anteriormente.

El uso de la función de devolución de llamada afterInsertRow requiere que cada fila de la grilla se coloque en la página antes de afterInsertRow devolución de llamada afterInsertRow . Por lo tanto, hace imposible el uso de gridview: true opción gridview: true y hace que el trabajo de la página sea lento.

Para ser exactos, debo mencionar que el rendimiento decreciente que describí anteriormente podría ser visible solo en caso de una gran red y se verá claramente en el caso de un navegador web lento (como Internet Explorer, especialmente versiones anteriores de IE).

Answer 2

De acuerdo con la documentación de jqGrid para gridview :

En las versiones anteriores de jqGrid incluyendo 3.4.X, la lectura de un conjunto de datos relativamente grande (número de filas> = 100) causaba problemas de velocidad. La razón de esto fue que a medida que cada celda se insertaba en la cuadrícula, aplicamos entre 5 y 6 llamadas de jQuery. Ahora este problema está resuelto; ahora insertamos la fila de entrada a la vez con un anexo jQuery. El resultado es impresionante, aproximadamente de 3 a 5 veces más rápido. ¿Cuál será el resultado si insertamos todos los datos a la vez? Sí, esto se puede hacer con la ayuda de la opción gridview (establézcalo en verdadero). El resultado es una cuadrícula que es de 5 a 10 veces más rápida. Por supuesto, cuando esta opción se configura como verdadera, tenemos algunas limitaciones. Si se establece en verdadero, no podemos usar treeGrid, subGrid o el evento afterInsertRow . Si no usa estas tres opciones en la grilla, puede establecer esta opción en verdadero y disfrutar de la velocidad.

Entonces, al usar esta opción puede obtener una buena mejora de velocidad, con la advertencia de que no es compatible con treeGrid, subGrid o afterInsertRow . Creo que ese es el alcance de las limitaciones. Si encuentra más, infórmenos para que la documentación se pueda actualizar.

Por lo que vale, en realidad se pueden ver casos específicos en los métodos addXmlData y addJSONData donde se omite afterInsertRow :

if(ts.p.gridview === false ) {
    $("tbody:first",t).append(rowData.join(''''));
    $(ts).triggerHandler("jqGridAfterInsertRow", [rid, rd, xmlr]);
    if(afterInsRow) {ts.p.afterInsertRow.call(ts,rid,rd,xmlr);}
    rowData=[];
}

Las limitaciones treeGrid y subGrid son más sutiles y no se mencionan explícitamente en el código.