SlickGrid, co to jest widok danych?

Question

Zacząłem używać SlickGrid i nie wiedziałem, czym różni się widok danych od siatki (z włączoną edycją). Nie znalazłem w dokumentach dyskusji na temat widoku danych, chociaż zostało tam wspomniane.

Proszę mnie oświecić.

Answer 1

W bardzo prosty sposób, wystarczy pomyśleć o trzech warstwach:

Grid 
    ---- 
DataView 
    ---- 
    Data 

Na dole masz surowych danych. To tylko zwykła stara tablica. Każda pozycja w tablicy reprezentuje jeden wiersz danych (wyświetlany jako jeden wiersz w siatce).

DataView odczytuje tablicę danych i udostępnia ją do siatki, ujawniając kilka standardowych metod. W ten sposób, gdy sieć chce uzyskać dane do celów wyświetlania, po prostu rozmawia z danymi za pomocą jednej ze standardowych metod.

Siatka jest elementem wyświetlacza. Jego jedynym zadaniem jest renderowanie kodu HTML niezbędnego do wyświetlania pożądanego wyniku na ekranie.

Siatka nigdy nie uzyskuje bezpośredniego dostępu do danych. Rozmawia tylko z danymi. Dzięki temu widok danych może wykonywać sztuczki podczas zwracania danych do siatki, na przykład dostarczając "fantomowe" wiersze używane do reprezentowania nagłówków grup.

Jeśli jesteś zainteresowany, poniższy przykład jest tylko najprostszym przykładem, jaki możesz wymyślić, wykorzystując widok danych z SlickGrid.

var data = [ 
    { title: "Primer",  rating: "A" }, 
    { title: "Matrix",  rating: "B" }, 
    { title: "Transformers", rating: "C" }, 
]; 
var columns = [ 
    { id: "title", name: "Title", field: "title" }, 
    { id: "rating", name: "Rating", field: "rating" } 
]; 
var options = { 
    enableColumnReorder: false // ... whatever grid options you need 
}; 

var dataView = new Slick.Data.DataView(); 
var grid = new Slick.Grid("#myGrid", dataView, columns, options); 

// wire up model events to drive the grid 
dataView.onRowCountChanged.subscribe(function (e, args) { 
    grid.updateRowCount(); 
    grid.render(); 
}); 
dataView.onRowsChanged.subscribe(function (e, args) { 
    grid.invalidateRows(args.rows); 
    grid.render(); 
}); 

// Feed the data into the dataview 
dataView.setItems(data); 

Answer 2

DataView umożliwia sortowanie i filtrowanie danych bez modyfikowania ani siatki. Można to traktować jako nakładkę na górze siatki, która zapewnia funkcje związane z widokiem - w niektórych przypadkach poprawia te funkcje.

Nadzieję, że pomaga!

Answer 3

DataView to abstrakcja na szczycie źródła danych. Jeśli wszystkie dane są dostępne na kliencie (tj. W tablicy JavaScript), DataView może dostarczyć wielu przydatnych funkcji, których sama sieć nie posiada. (Fakt, że sieć nie ma tych cech, jest z założenia zaprojektowany - SlickGrid stara się zachować prostotę i prostotę rdzenia, jednocześnie zachęcając do modułowego projektowania i abstrakcji danych w swoim interfejsie API.)

DataView działa poprzez przyjmowanie danych i działanie jako dane dostawca, który możesz przekazać do SlickGrid zamiast oryginalnej tablicy danych. Na przykład, jeśli tworzysz dane grupy DataView, powoduje to, że siatka uważa, że ​​wiersze "grupy" są zwykłymi elementami danych, więc siatka nie musi być ich świadoma. DataView informuje sieć, że te elementy mają niestandardowy wyświetlacz i zachowanie oraz zapewnia implementację obu. Następnie łączysz zdarzenia OnRowCountChanged i onRowsChanged DataView w celu aktualizacji siatki i voila.

Oto szorstki lista cech, które DataView dodaje do sieci:

• stronicowania.
• Sortowanie.
• Wyszukaj.
• Grupowanie z podsumowaniami.
• Rozwiń/zwiń grupy.