Perché è gridview: vero usato e cosa significa?

Sto lavorando su JqGrid.

Voglio sapere cosa significa se specifichiamo gridview:true .

E in quali casi dobbiamo fornire?

Recentemente stavo lavorando su uno di questi jqGrid e il mio afterInsertRow non veniva chiamato, una volta che ho rimosso la gridview:true ora viene effettuata la chiamata.

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

Per favore guidami su questo.

Concordo sul fatto che gridview: true opzione non è valida spiegata nella documentazione. In alcuni casi (come nel caso di TreeGrid) l’opzione verrà impostata automaticamente. Quindi cerco di spiegare cosa significa e perché raccomando sempre di usare gridview: true option e never use afterInsertRow .

Molte persone iniziano con altri linguaggi del computer come JavaScript e scrivono il suo primo programma che gira nel browser 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, è ansible 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 web browser deve ricalcolare di posizionare tutti gli elementi esistenti sulla pagina e spostarne alcuni dagli elementi in un’altra posizione . Anche cambiando lo stile CSS di un elemento avviene il cosiddetto reflow. Ti consiglio di leggere l’articolo e di guardare il video sull’argomento.

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

Nel caso di jqGrid, è necessario riempire

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. In seguito jqGrid chiama jQuery.append nella riga che imposta internamente la proprietà innerHTML per impostare l’intero frammento HTML sulla pagina.

A causa della stessa ragione per cui si dovrebbero utilizzare i cellattr , rowattr o personalizzati che funzionano con i frammenti HTML, rappresentano le celle o le righe come stringhe . Alla fine le stringhe saranno aggiunte ad altre stringhe e saranno usate nell’operazione jQuery.append come ho descritto sopra.

L’utilizzo della funzione di callback afterInsertRow richiede che ogni riga della griglia venga posizionata sulla pagina prima di chiamare la callback afterInsertRow . Quindi rende imansible l’uso di gridview: true opzione 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à per lo più chiara vista in caso di browser lento (come Internet Explorer, in particolare vecchie versioni di IE).

Secondo la documentazione di gridview per gridview :

Nelle versioni precedenti di jqGrid incluso 3.4.X, la lettura di un set di dati relativamente grande (numero di righe> = 100) causava 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 è ansible utilizzare treeGrid, subGrid o l’evento afterInsertRow . Se non si utilizzano queste tre opzioni nella griglia, è ansible impostare questa opzione su true e godersi la velocità.

Quindi, usando questa opzione puoi ottenere un buon miglioramento della velocità, con l’avvertenza che non è compatibile con treeGrid, subGrid 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, puoi effettivamente vedere casi specifici nei 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=[]; } 

Le limitazioni treeGrid e subGrid sono più sottili e non vengono esplicitamente richiamate nel codice.