Dlaczego gridview: true użyte i co to znaczy?

Question

Pracuję nad JqGrid.

Chcę wiedzieć, co to znaczy, jeśli określimy gridview:true.

W jakich przypadkach powinniśmy podać?

Niedawno pracowałem nad jednym z takich jqGrid, a mój afterInsertRow nie był wywoływany, po tym, jak wyrejestrowałem gridview:true, teraz wykonuję połączenie.

Jest to jedna z tych spraw, które sam doświadczyłem, zastanawiałem się, czy są jeszcze inne przypadki, które powinniśmy wiedzieć, jeśli użyjemy gridview:true.

Proszę mnie o tym poprowadzić.

Answer 1

Zgadzam się, że opcja gridview: true nie jest dobrze wyjaśniona w dokumentacji. W niektórych przypadkach (jak w przypadku TreeGrid) opcja zostanie automatycznie ustawiona. Więc próbuję wyjaśnić, co to znaczy i dlaczego zalecam zawsze używać opcji gridview: true i nigdy nie używać afterInsertRow.

Wiele osób zaczyna od innych języków komputerowych jako JavaScript i pisze swój pierwszy program, który działa w przeglądarce po tym, jak mają jakiś styl pisania programów. Miałem ten sam problem 3 lata wcześniej. Ważne jest, aby zrozumieć, co musi zrobić przeglądarka internetowa po wprowadzeniu pewnych zmian na stronie HTML. W przypadku korzystania z jQuery jest to rzecz, którą na stałe robisz.

Po zmianie elementu DOM na stronie można zmienić pozycję we wszystkich pozostałych elementach DOM istniejących na stronie.Jeśli myślisz o modelu pływającym (jak z float: left) lub wielu innych ustawieniach CSS, zrozumiesz, że przeglądarka nie może po prostu przesunąć reprezentacji mapy bitowej istniejącej strony i wstawić nowego wstawionego elementu. Tak więc przeglądarka internetowa musi przeliczyć pozycję wszystkich elementów istniejących na stronie i przenieść niektóre elementy z innego miejsca w innym miejscu. Nawet jeśli zmienisz styl CSS elementu, ma miejsce tzw. Reflow. Polecam przeczytać the article i obejrzeć wideo na ten temat.

Głównym celem poprawy wydajności przeglądarki internetowej opisanego powyżej przypadku będzie w celu zmniejszenia liczby zmian na stronie. Więc musisz zmienić 5 stylów jednego elementu DOM, który powinieneś zrobić w jednej operacji. Możesz użyć jQuery.css({...}) ze wszystkimi zmienionymi stylami zamiast 5 oddzielnych połączeń. Jeszcze lepiej może być zdefiniowanie jednej klasy CSS i użycie metody jQuery.addClass.

W przypadku jqGrid należy wypełnić <tbody> ze wszystkimi wierszami i komórkami siatki. Jeśli użyjesz opcji gridview: true, jqGrid zbierze zawartość wszystkich wierszy jako ciągi zawierające fragmenty HTML. Później jqGrid wywołuje jQuery.append w the line, która ustawia wewnętrznie właściwość innerHTML, aby ustawić cały fragment HTML na stronie.

powodu tego samego powodu należy użyć cellattr, rowattr lub custom formatters który współpracuje z fragmentów HTML reprezentowane komórki lub wiersze jako ciągi. Na końcu ciągi będą dołączane do innych ciągów i będą używane w operacji jQuery.append, tak jak opisałem powyżej.

Wykorzystanie afterInsertRow funkcji zwrotnej wymaga, aby każdy wiersz siatki będzie umieszczone na stronie przed wywołaniem z afterInsertRow zwrotnego. Z tego powodu uniemożliwia korzystanie z opcji gridview: true i powolne działanie strony.

Dokładniej powinienem wspomnieć, że obniżenie wydajności, które opisałem wcześniej, może być widoczne tylko w przypadku dużej sieci i będzie w większości wyraźne w przypadku powolnej przeglądarki internetowej (np. Internet Explorer, zwłaszcza stare wersje IE) .

Answer 2

Według jqGrid documentation do gridview:

w poprzednich wersjach jqGrid tym 3.4.x czytania stosunkowo duży zestaw danych (liczba rzędów> = 100) powoduje problemy prędkości. Powodem tego było to, że gdy każda komórka została wstawiona do sieci, zastosowaliśmy do niej od 5 do 6 wywołań jQuery. Teraz ten problem został rozwiązany; teraz wstawiamy wiersz wprowadzania naraz za pomocą dołączenia jQuery. Rezultat jest imponujący - od 3 do 5 razy szybszy. Jaki będzie wynik, jeśli wstawimy wszystkie dane naraz? Tak, można to zrobić za pomocą opcji gridview (ustaw ją na true). Rezultatem jest siatka, która jest od 5 do 10 razy szybsza. Oczywiście, gdy ta opcja jest ustawiona na true, mamy pewne ograniczenia. Jeśli ustawiono wartość true, nie można użyć zdarzenia treeGrid, subGrid ani afterInsertRow. Jeśli nie używasz tych trzech opcji w siatce, możesz ustawić tę opcję na wartość true i cieszyć się prędkością.

Więc za pomocą tej opcji można uzyskać ładny poprawę prędkości, z zastrzeżeniem, że nie jest kompatybilny z TreeGrid, subgrid lub afterInsertRow. Uważam, że to zakres ograniczeń. Jeśli znajdziesz więcej, daj nam znać, aby można było zaktualizować dokumentację.

---

Na co warto, to może faktycznie see specific cases w grid.base.js metody addXmlData i addJSONData gdzie afterInsertRow jest pomijany:

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

TreeGrid i subgrid ograniczenia są bardziej subtelne i nie są wyraźnie zawołał w kod.