obtener - tablas dinamicas html javascript

jqGrid Toma mucho tiempo para grandes registros

Question

Estoy usando jgGrid. Funciona perfectamente pero cuando paso unos 90,000 registros y abro la página en google chrome, toma alrededor de 8 segundos crear una cuadrícula que en mi caso debería ser de 3-4 segundos. y, además, cuando ejecuto la misma página en IE, deja de responder.

¿Alguna sugerencia de cómo puedo reducir el tiempo?

mi guion

function GetCommodityGrid(array) {
array = array.rows; // assign rows array to array object
totalRows = array.length;
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
datatype: ''local'',
data: array,
colNames: [''COM_NAME'', ''COM_CODE'', ''DELV_UNITS'', ''LOT_SIZE'', ''TICK_SIZE'', ''TICK_VALUE''],
colModel: [
{ name: ''COM_NAME'', index: ''COM_NAME'', width: 90, editable: true },
{ name: ''COM_CODE'', index: ''COM_CODE'', width: 100, editable: true },
{ name: ''DELV_UNITS'', index: ''DELV_UNITS'', width: 80, align: "right", editable: true },
{ name: ''LOT_SIZE'', index: ''LOT_SIZE'', width: 80, align: "right", editable: true },
{ name: ''TICK_SIZE'', index: ''TICK_SIZE'', width: 80, align: "right", editable: true },
{ name: ''TICK_VALUE'', index: ''TICK_VALUE'', width: 150, sortable: false, editable: true }
],
rowList: [50,100,200],
rownumbers: true, // show the numbers on rows
loadonce: true,
pager: ''#pager'',
sortname: ''COM_NAME'',
viewrecords: true, // show the total records on the end of the page
editurl: "TestGrid/EditRecord",
caption: "JSON Example",
//new option
gridview: true,
autoencode: true,
});
$("#list").jqGrid("navGrid", "#pager", { add: false },
{ //the Edit options
closeAfterEdit: true,
afterSubmit: function (response) {
// you should return from server OK in sucess, any other message on error
alert("after Submit");
if (response.responseText == "OKK") {
alert("Update is succefully")
return [true, "", ""]
}
else {
alert("Update failed")
$("#cData").click();
return [false, "", ""]
}
}
});
});
}

Answer 1

Analicé el proceso de carga de la red local con 90,000 filas sin clasificar y encontré un cuello de botella muy gracioso que uno puede superar fácilmente. En primer lugar, aquí está la demostración que funciona rápidamente y aquí está casi la misma demo que funciona muy lentamente, especialmente en IE.

La mayor parte del tiempo de carga de jqGrid obtiene la línea del código jqGrid directamente en el inicio:

var p = $.extend(true,{
// there are here different default values of jqGrid parameters
}, $.jgrid.defaults, pin || {});

Como uno usa true como el primer parámetro, jQuery hace una copia completa de los datos y funciona lentamente (¿por qué? Es otra pregunta pura de jQuery).

Como solución, sugiero que no se establezca ningún parámetro de data durante la creación de la grilla. En el caso, se usarán los data: [] parámetros predeterminados data: [] . En lugar de eso, uno puede establecer data dentro de la devolución de llamada onInitGrid :

$("#list").jqGrid({
//data: gridData,
datatype: "local",
....
onInitGrid: function () {
// get reference to parameters
var p = $(this).jqGrid("getGridParam");
// set data parameter
p.data = gridData;
}
});

Como resultado, el rendimiento de la carga de la red será mucho mejor.

Posteriormente publicaré mis sugerencias para ver cómo hacer un pequeño cambio en el código de jqGrid para mejorar el rendimiento de jqGrid en el caso. Lo que sugiero es muy simple. Uno puede guardar data parámetro de data en una variable, luego llamar var p = $.extend(true,{...}); y luego establecer data parámetro de data directamente en p variable

 // save local data array in temporary variable and remove from input parameters
// to improve performance
var localData;
if (pin != null && pin.data !== undefined) {
localData = pin.data;
pin.data = [];
}
var p = $.extend(true,{
// there are here different default values of jqGrid parameters
}, $.jgrid.defaults, pin || {});
if (localData !== undefined) {
p.data = localData;
}

La demostración usa el código fijo de jqGrid y funciona rápidamente.

ACTUALIZADO : La solicitud de extracción que publiqué en trirand ya está fusionada con el código principal de jqGrid en github (ver más en el informe de errores ). Entonces la próxima versión de jqGrid (versión más alta como 4.6.0) no tendrá el problema descrito.

Answer 2

Intente cargar JqGrid a pedido, es decir, cargue un fragmento de datos más pequeño a la vez en lugar de todos los datos y cargue los datos restantes en la paginación.

Aquí hay un código de muestra para referencia

PHP con MySQL

...
$page = $_GET[''page'']; // get the requested page
$limit = $_GET[''rows'']; // get how many rows we want to have into the grid
$sidx = $_GET[''sidx'']; // get index row - i.e. user click to sort
$sord = $_GET[''sord'']; // get the direction
if(!$sidx) $sidx =1;
// connect to the database
$db = mysql_connect($dbhost, $dbuser, $dbpassword)
or die("Connection Error: " . mysql_error());
mysql_select_db($database) or die("Error conecting to db.");
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader a, clients b WHERE a.client_id=b.client_id");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row[''count''];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
if ($start<0) $start = 0;
$SQL = "SELECT a.id, a.invdate, b.name, a.amount,a.tax,a.total,a.note FROM invheader a, clients b WHERE a.client_id=b.client_id ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldnt execute query.".mysql_error());
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[$i]=$responce->rows[$i][''cell'']=array($row[id],$row[invdate],$row[name],$row[amount],$row[tax],$row[total],$row[note]);
$i++;
}
echo $json->encode($responce); // coment if php 5
//echo json_encode($responce);
...