Perché gridview: vero usato e cosa significa?

Question

Sto lavorando su JqGrid.

Voglio sapere cosa vuol dire se specifichiamo gridview:true.

E in quali casi è necessario fornire?

Recentemente stavo lavorando su uno di questi jqGrid e il mio afterInsertRow non veniva chiamato, una volta che ho inviato il gridview:true alla chiamata.

Questo è un caso che io stesso ho sperimentato, mi chiedevo se ci sono anche altri casi che dovremmo sapere se viene utilizzato gridview:true.

Per favore guidami su questo.

Answer 1

Sono d'accordo che l'opzione gridview: true non è valida spiegata nella documentazione. In alcuni casi (come nel caso di TreeGrid) l'opzione verrà impostata automaticamente. Così provo a spiegare cosa significa e perché raccomando sempre di usare l'opzione gridview: true e non usare mai afterInsertRow.

Molte persone iniziano con altri linguaggi del computer come JavaScript e scrivono il suo primo programma che viene eseguito nel browser Web dopo che hanno uno stile di scrittura dei programmi. Ho avuto lo stesso problema 3 anni prima. È importante capire cosa deve fare il browser Web dopo aver apportato alcune modifiche alla pagina HTML. Nell'uso dell'uso di jQuery è la cosa che fai in modo permanente.

Se si modifica un elemento DOM nella pagina, è possibile modificare la posizione su tutti gli altri elementi DOM esistenti nella pagina.Se si pensa al modello mobile (come con float: left) o a molte altre impostazioni CSS, si capirà che il browser Web non può semplicemente spostare la rappresentazione bitmap della pagina esistente e inserire il nuovo elemento inserito. Quindi il il browser web deve ricalcolare di posizionare tutti gli elementi esistenti nella pagina e spostarli dagli elementi in un'altra posizione. Anche cambiando lo stile CSS di un elemento avviene il cosiddetto reflow. Ti consiglio di leggere the article e di guardare il video sull'argomento.

L'idea principale per migliorare le prestazioni del browser web il caso sopra descritto sarà per ridurre il numero di modifiche nella pagina. Quindi è necessario modificare 5 stili di un elemento DOM che dovresti fare in un'unica operazione. È possibile utilizzare jQuery.css({...}) con tutti gli stili modificati anziché 5 chiamate separate. Ancora meglio potrebbe essere definire una classe CSS e utilizzare il metodo jQuery.addClass.

In caso di jqGrid è necessario riempire <tbody> con tutte le righe e le celle della griglia. Se si utilizza l'opzione gridview: true, jqGrid raccoglie il contenuto di tutte le righe come stringhe con frammenti HTML. Più tardi jqGrid chiama jQuery.append in the line che imposta internamente la proprietà innerHTML per impostare l'intero frammento HTML sulla pagina.

A causa della stessa ragione si dovrebbe usare cellattr, rowattr o custom formatters che funziona con frammenti HTML rappresentato le cellule o le righe come stringhe. Alla fine le stringhe verranno aggiunte ad altre stringhe e saranno utilizzate nell'operazione jQuery.append come descritto sopra.

L'utilizzo di afterInsertRow funzione di callback richiedono che ogni fila sarà collocato sulla pagina prima di chiamare di afterInsertRow callback. Quindi rende impossibile l'utilizzo dell'opzione gridview: true e rende il funzionamento della pagina lentamente.

Per essere precisi, devo dire che la riduzione delle prestazioni che ho descritto prima potrebbe essere visibile solo in caso di una grande griglia e sarà in gran parte visibile in caso di browser lento (come Internet Explorer, in particolare vecchie versioni di IE) .

Answer 2

Secondo la jqGrid documentation per gridview:

Nelle versioni precedenti di jqGrid compreso 3.4.x, la lettura di un relativamente grande insieme di dati (numero di righe> = 100) ha causato problemi di velocità. La ragione di ciò è che quando ogni cella è stata inserita nella griglia, abbiamo applicato circa da 5 a 6 chiamate jQuery. Ora questo problema è risolto; ora inseriamo la riga di entrata contemporaneamente con un'appendice di jQuery. Il risultato è impressionante: da 3 a 5 volte più veloce. Quale sarà il risultato se inseriremo tutti i dati contemporaneamente? Sì, questo può essere fatto con l'aiuto dell'opzione gridview (impostarlo su true). Il risultato è una griglia da 5 a 10 volte più veloce. Naturalmente, quando questa opzione è impostata su true, abbiamo alcune limitazioni. Se impostato su true, non è possibile utilizzare treeGrid, subGrid o l'evento afterInsertRow. Se non si utilizzano queste tre opzioni nella griglia, è possibile impostare questa opzione su true e godersi la velocità.

Quindi, utilizzando questa opzione, è possibile ottenere un bel miglioramento della velocità, con l'avvertenza che non è compatibile con TreeGrid, sotto-griglia, o afterInsertRow. Credo che sia l'estensione dei limiti. Se ne trovi di più, faccelo sapere in modo che la documentazione possa essere aggiornata.

---

Per quello che vale, si può effettivamente see specific cases in grid.base.js metodi addXmlData e addJSONData dove afterInsertRow viene saltato:

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=[]; 
} 

Il TreeGrid e sottogriglia limitazioni sono più sottili e non sono esplicitamente chiamati nel codice.