2012-01-27 3 views
5

indica nella documentazione jqgrid che il codice seguente dovrebbe consentire l'ordinamento locale con paging lato server; i dati della griglia scompaiono durante il paging; questa domanda è stato chiesto prima, con una risposta chiara - suggerimenti per utilizzare loadonce: vero significa che il paging è spento - Ho bisogno di pagingjqgrid ordinamento lato client con paging lato server - i dati scompaiono

modificato in seguito PER MOSTRARE pagina HTML completo e risposta JSON (Im ora in esecuzione questo da un php/mysql backend).

mia pagina HTML completo

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>JQGrid Test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" type="text/css" href="../dojoproject/jquery-ui-1.8.16.custom/css/start/jquery-ui-1.8.16.custom.css"> 
<link rel="stylesheet" type="text/css" href="jquery.jqGrid-4.3.1/css/ui.jqgrid.css"> 
<style type="text/css"> 
html, body { 
    margin: 0; 
    padding: 0; 
    font-size: 90%; 
} 
</style> 
<script type="text/javascript" src="../dojoproject/jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js" ></script> 
<script type="text/javascript" src="../dojoproject/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js" ></script> 
<script type="text/javascript" src="jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js" ></script> 
<script type="text/javascript" src="jquery.jqGrid-4.3.1/js/jquery.jqGrid.min.js" ></script> 
<script type="text/javascript" src="../dojoproject/jqGrid-4.1.2/js/JSON-js/json2.js" ></script> 

<script> 

$(function() { 
$('#table').jqGrid({ 
    jsonReader : { 
    repeatitems: false, 
    cell:"", 
    id:"0" 
    }, 
    height:'auto', 
    url:'/jqgrid/orderdetails.php', 
    postData:{test:'value'}, 
    datatype: 'json', 
    mtype: 'POST', 
    rownumbers:true, 
    rownumWidth:35, 
    colNames:['OrderID','UnitPrice','Quantity','Discount','ProductName'], 
    colModel :[ 
     {name:'OrderID', index:'OrderID',search:false,sorttype:'integer'}, 
     {name:'UnitPrice', index:'UnitPrice',editable:true,sorttype:'float'}, 
     {name:'Quantity', index:'Quantity',sorttype:'int'}, 
     {name:'Discount', index:'Discount',sorttype:'int'}, 
     {name:'ProductName', index:'ProductName'} 
    ], 
    sortname: 'OrderID ', 
    rowNum:5, 
    sortorder: 'asc', 
    width:'100%', 
    height:'200', 
    viewrecords: true, 
    gridview: true, 
    caption: 'NorthWind Orders', 
    scrollOffset:18, 
    multiselect:true, 
    pager:'pager' 
    ,cellEdit:true, 
    cellsubmit:'clientArray', 
    afterSaveCell:function(rowid, cellname, value, iRow, iCol){ 
    }, 
     onPaging: function() { 
     $("#table").setGridParam({datatype:'json'}).trigger("reloadGrid"); 
     },    
    loadComplete: function (data) { 
     $("#table").setGridParam({datatype:'local'}).trigger("reloadGrid"); 
     } 
    }); 
}); 

</script> 

</head> 
<body> 

<table id='table'></table> 
<div id='pager'></div> 
</body> 
</html> 

risposta il 1 ° carico è

{"page":"1","total":431,"records":2155,"rows":[{"OrderID":"1024811","UnitPrice":"14.0000","Quantity":"12","Discount":"0"},{"OrderID":"1024842","UnitPrice":"9.8000","Quantity":"10","Discount":"0"},{"OrderID":"1024872","UnitPrice":"34.8000","Quantity":"5","Discount":"0"},{"OrderID":"1024914","UnitPrice":"18.6000","Quantity":"9","Discount":"0"},{"OrderID":"1024951","UnitPrice":"42.4000","Quantity":"40","Discount":"0"}]} 

risposta da pagina 2:

{"page":"2","total":431,"records":2155,"rows":[{"OrderID":"1025041","UnitPrice":"7.7000","Quantity":"10","Discount":"0"},{"OrderID":"1025051","UnitPrice":"42.4000","Quantity":"35","Discount":"0.15"},{"OrderID":"1025065","UnitPrice":"16.8000","Quantity":"15","Discount":"0.15"},{"OrderID":"1025122","UnitPrice":"16.8000","Quantity":"6","Discount":"0.05"},{"OrderID":"1025157","UnitPrice":"15.6000","Quantity":"15","Discount":"0.05"}]} 
+0

Il motivo del problema potrebbe essere non solo un bug in jqGrid, ma anche un bug nei dati forniti dalla parte server, i formattatori che si usano nel 'colModel' e così via. Potresti includere più definizione completa di jqGrid e anche due risposte JSON restituite dal server: il primo risponderà sulla richiesta della prima pagina e la seconda risposta JSON dalla richiesta della seconda pagina. Avendo tutti i dati uno può riprodurre il tuo problema. Tuttavia, personalmente ho meno senso in combinazione con l'ordinamento locale e il paging lato server. – Oleg

+0

Preferisco l'ordinamento client per evitare la necessità di implementare l'ordinamento lato server, oltre a prestazioni - a meno che qualcuno suggerisca un ordinamento multi column senza colonne (e ricerca multi-colonna :-)) usando linq a sql –

+0

La risposta JSON che hai postato non è pieno, quindi non può essere utilizzato per riprodurre il problema. Ora vedo che usi 'scroll: 1' che in * non impagina dati *. È * scrolling virtuale *. Penso che dovresti rimuovere l'opzione per far funzionare il programma. L'ordinamento dei dati sul lato server è molto più efficace dal punto di vista delle prestazioni.Inoltre se l'utente richiede di ottenere la prima pagina di dati ordinati per colonna, è necessario prima ordinare i dati e poi ottenere la prima pagina dei risultati per fornire una risposta corretta. – Oleg

risposta

6

Prima di tutto voglio ripetere che non lo faccio consiglia di utilizzare l'ordinamento locale e il paging lato server. Trovo che l'utente possa erroneamente interpretare il risultato dell'ordinamento.

Tuttavia, se il cliente è d'accordo con la limitazione che hanno la combinazione di smistamento locale e la paginazione lato server e se si davvero necessità di attuare tale, posso suggerire la seguente soluzione:

onPaging: function() { 
    $(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid"); 
}, 
loadComplete: function (data) { 
    var $this = $(this); 
    if ($this.jqGrid('getGridParam', 'datatype') === 'json') { 
     // because one use repeatitems: false option and uses no 
     // jsonmap in the colModel the setting of data parameter 
     // is very easy. We can set data parameter to data.rows: 
     $this.jqGrid('setGridParam', { 
      datatype: 'local', 
      data: data.rows, 
      pageServer: data.page, 
      recordsServer: data.records, 
      lastpageServer: data.total 
     }); 

     // because we changed the value of the data parameter 
     // we need update internal _index parameter: 
     this.refreshIndex(); 

     if ($this.jqGrid('getGridParam', 'sortname') !== '') { 
      // we need reload grid only if we use sortname parameter, 
      // but the server return unsorted data 
      $this.triggerHandler('reloadGrid'); 
     } 
    } else { 
     $this.jqGrid('setGridParam', { 
      page: $this.jqGrid('getGridParam', 'pageServer'), 
      records: $this.jqGrid('getGridParam', 'recordsServer'), 
      lastpage: $this.jqGrid('getGridParam', 'lastpageServer') 
     }); 
     this.updatepager(false, true); 
    } 
} 

Se non si usi repeatitems: false il codice che riempie il parametro data di jqGrid sarà un po 'più lungo, ma funzionerà.

+0

solo una piccola anomalia in questa soluzione - per l'ordinamento di pagine diverse dalla pagina 1, il cercapersone salta alla pagina 1 ma i dati sono ok –

+0

@chohi: il problema con il numero di pagina potrebbe essere risolto molto facilmente. Vedi il codice aggiornato della mia risposta. – Oleg

+0

grazie Oleg - questo funziona perfettamente; Prendo anche il tuo consiglio e in seguito userò l'ordinamento server –

0

La soluzione di cui sopra funziona bene tranne nel caso in cui, se ci si trova nell'ultima pagina della griglia, supponiamo di avere 3 righe visualizzate nell'ultima pagina, sebbene la pagina possa contenere 5 righe.

Ora, se provo a eseguire l'ordinamento lato client, l'ultima pagina verrà riempita con 2 righe aggiuntive e le 5 righe totali verranno ordinate. Direi, potrebbero essere gli ultimi record recuperati sono memorizzati nel buffer in modo che questo si verifichi. Per quanto correzione di questo, onPagination, deselezionare la griglia prima di fare la griglia come "JSON", come

clickOnPagination = function() { $(this).jqGrid("clearGridData"); $(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid"); }

e nel codice sorgente commento delle linee
$t.p.records = 0;$t.p.page=1;$t.p.lastpage=0; in clearGridData funzione, in modo che la prossima impaginazione funzionerà correttamente.

+0

Nice catch, ma apportare modifiche al codice sorgente non è una buona idea per la manutenzione. – darksoulsong