Najlepsza dynamiczna siatka JavaScript / JQuery [zamknięte]

87

Pracuję z JavaScript, JQuery i HTML. Interfejs użytkownika mojego projektu jest całkowicie dynamiczny. Szukam dynamicznej siatki JavaScript / JQuery, która obsługuje następujące funkcje.

Czy ktoś może mi powiedzieć, czy istnieje jakaś dobrze wyglądająca siatka otwartych źródeł, która obsługuje następujące funkcje?

  1. Powinienem być w stanie utworzyć instancję siatki w czasie wykonywania i dodać ją do DOM.
  2. Obsługuje szablony kolumn (pole tekstowe, pole wyboru, pole wyboru lub dowolne dane wejściowe lub prosty tekst)
  3. Obsługuje ustawienie nowego szablonu kolumny lub zastąpienie istniejącego szablonu kolumny w czasie rzeczywistym.
  4. Niewiele elementów sterujących wprowadzaniem (np. Pole tekstowe, pole wyboru…) znajdujące się pod kolumną może być włączonych, a kilka może być wyłączonych .
  5. Obsługuje setData () w czasie rzeczywistym.
  6. Obsługuje zdarzenie, jeśli jakiekolwiek dane wejściowe zostały zmienione przez użytkownika.
  7. Powinien obsługiwać wybór wiersza
  8. Dodaj lub usuń obsługę wierszy w czasie rzeczywistym bez renderowania całej siatki.
  9. Obsługuje stronicowanie.
  10. Obsługuje sortowanie według dowolnej kolumny w czasie rzeczywistym.
  11. Uruchamia zdarzenie, jeśli dane są sortowane według użytkownika w czasie rzeczywistym.
  12. Interfejs użytkownika siatki musi obsługiwać kolumny możliwe do zrealizowania
  13. Automatyczna zmiana rozmiaru (będzie świetnie, jeśli siatka będzie automatycznie dostosowywana do rozmiaru elementu nadrzędnego)
  14. Zdecydowanie ma dobrą dokumentację.
Somnath
źródło
7
Napisz to sam. Jeśli chcesz mieć wszystkie te funkcje, musisz zrobić to sam. Indywidualne rozwiązanie jest zawsze najlepszym rozwiązaniem.
Raynos
28
Nie jestem pewien, czy to zawsze najlepsze rozwiązanie. To znaczy - nie zamierzam budować własnego silnika bazy danych, zamiast używać InnoDB ...
Grim ...
2
@Roynos, sam napisałem kilka rzeczy, ale muszę poświęcić dużo czasu, aby zaimplementować wszystkie funkcje, takie jak sortowanie, zmiana rozmiaru ... itd., Więc szukam kontroli siatki. Nadal oceniam wszystkie siatki jeden po drugim.
Somnath
22
@Raynos To śmieszne. Najlepszym rozwiązaniem jest rozwiązanie, które działa jak najniższy koszt. Po co go budować, skoro już zostało zrobione?
Richard
@RichardDesLonde masz rację. Moją opcją jest wybranie istniejącego najlepszego rozwiązania i rozszerzenie go zgodnie z Twoimi wymaganiami.
Somnath,

Odpowiedzi:

42

Niektóre przydatne to:

Wolny:

Płatny:

Moim zdaniem najlepsze wpisy to Flexigrid i jQuery Grid.

Soham
źródło
Do tej pory polubiłem jQuery Grid. trirand.com/blog/jqgrid/jqgrid.html Ale nadal nie jestem pewien. Informujcie was na bieżąco ...
Somnath,
@Somnath - Czy jQuery grid jest tym, z którego byłeś najbardziej zadowolony? Mam podobną potrzebę i oceniam DataTables, ale dodawanie wierszy (i umieszczanie ich w porządku sortowania) nie działa dobrze.
MattW,
@MattW Tak lubię jQuery Grid, dodawanie danych jest naprawdę łatwe. Możesz również umożliwić sortowanie każdej kolumny, ustawiając tylko flagę. Moja lista wymagań była naprawdę duża. Ale kilka rzeczy buduję samodzielnie iw kilku przypadkach używam jQuery Grid. Ma też fajne i łatwe API. W tej chwili jestem zadowolony z jQuery Grid. To jest dobre.
Somnath
@Somnath Więc w końcu który z nich wybrałeś? I nagłówek DataTable jest również dobrą opcją. Który jest najszybszy? A który obsługuje grupowanie?
Vivek Vardhan,
@VivekVardhan im using trirand.com/blog/jqgrid/jqgrid.html
Somnath
38

możesz spróbować http://datatables.net/

DataTables to wtyczka do biblioteki jQuery Javascript. Jest to bardzo elastyczne narzędzie, oparte na podstawach stopniowego ulepszania, które doda zaawansowane elementy sterujące interakcją do dowolnej tabeli HTML. Kluczowe cechy:

  • Paginacja o zmiennej długości
  • Filtrowanie w locie
  • Sortowanie wielokolumnowe z wykrywaniem typu danych
  • Inteligentna obsługa szerokości kolumn
  • Wyświetlaj dane z prawie każdego źródła danych
  • DOM, tablica Javascript, plik Ajax i przetwarzanie po stronie serwera (PHP, C #, Perl, Ruby, AIR, Gears itp.)
  • Opcje przewijania dla rzutni tabeli
  • W pełni międzynarodowy
  • Obsługa jQuery UI ThemeRoller
  • Solidny - poparty pakietem ponad 2600 testów jednostkowych
  • Szeroka gama wtyczek inc. TableTools, FixedColumns, KeyTable i więcej
  • Jest wolne!
  • Oszczędność stanu
  • Ukryte kolumny
  • Dynamiczne tworzenie tabel
  • Automatyczne ładowanie danych Ajax
  • Niestandardowe pozycjonowanie DOM
  • Filtrowanie w jednej kolumnie
  • Alternatywne typy stronicowania
  • Nieniszcząca interakcja DOM
  • Podświetlanie kolumn sortowania
  • Zaawansowane opcje źródła danych
  • Rozbudowana obsługa wtyczek
  • Sortowanie, wykrywanie typów, funkcje API, paginacja i filtrowanie
  • W pełni motywowane przez CSS
  • Solidna dokumentacja
  • Ponad 110 gotowych przykładów
  • Pełne wsparcie dla Adobe AIR
enklawowany
źródło
3
Proszę odpowiednio sformatować kluczowe funkcje. Nie używaj tylko kopiuj / wklej. Czy trzeba to raz przeczytać po skopiowaniu / wklejeniu?
Co oznacza „Nieniszcząca interakcja DOM”? Trudno jest zrozumieć, dlaczego jest to nowość lub funkcja i co obejmuje / gwarantuje.
John Zabroski
1
@John nie ma już o tym wzmianki na połączonej stronie, ale jeśli poszukasz w Internecie tego zdania, zobaczysz „Największą zmianą w wersji 1.4 jest nieniszcząca interakcja DOM. Oznacza to, że DataTables nie nadpisze elementy tabeli w celu wykonania swoich funkcji (prawdziwe ulepszenie progresywne!), raczej przesuwa elementy dookoła.W wersji 1.3 i zanim dynamicznie utworzy kod HTML wymagany dla tbody przy każdym losowaniu, już tak nie jest. Bezpośrednią zaletą jest to, że wszystkie atrybuty (klasy itp.) Z oryginalnej tabeli są zachowane [...] "
CodeCaster,
5
to nie jest wolne oprogramowanie. Myślę, że jest z nim problem.
David
4
wydaje się, że te fajne siatki DataTables nie są edytowalne, a jeśli tego potrzebujesz - musisz zapłacić za edytowalną wersję: editor.datatables.net/purchase/index
yetanothercoder
8

Poniżej moja sugestia dotycząca dynamicznej siatki JQuery.

http://reconstrukt.com/ingrid/

https://github.com/mleibman/SlickGrid

http://www.datatables.net/index

Najlepszy z nich to:

DataTables to wtyczka do biblioteki jQuery Javascript. Jest to bardzo elastyczne narzędzie, oparte na podstawach stopniowego ulepszania, które doda zaawansowane elementy sterujące interakcją do dowolnej tabeli HTML.

Paginacja o zmiennej długości

Filtrowanie w locie

Sortowanie wielokolumnowe z wykrywaniem typu danych

Inteligentna obsługa szerokości kolumn

Wyświetlaj dane z prawie każdego źródła danych

DOM, tablica Javascript, plik Ajax i przetwarzanie po stronie serwera (PHP, C #, Perl, Ruby, AIR, Gears itp.)

Opcje przewijania dla rzutni tabeli

W pełni międzynarodowy

Obsługa jQuery UI ThemeRoller

Solidny - poparty pakietem ponad 2600 testów jednostkowych

Szeroka gama wtyczek inc. TableTools, FixedColumns, KeyTable i więcej

Dynamiczne tworzenie tabel

Automatyczne ładowanie danych Ajax

Niestandardowe pozycjonowanie DOM

Filtrowanie w jednej kolumnie

Alternatywne typy stronicowania

Nieniszcząca interakcja DOM

Podświetlanie kolumn sortowania

Zaawansowane opcje źródła danych

Rozbudowana obsługa wtyczek

Sortowanie, wykrywanie typów, funkcje API, paginacja i filtrowanie

W pełni motywowane przez CSS

Solidna dokumentacja

Ponad 110 gotowych przykładów

Pełne wsparcie dla Adobe AIR


źródło
5

Spójrz na agiletoolkit.org, ponieważ ma prosty w użyciu CRUD, który obsługuje 2,4,6,7,9,10 i 12 po wyjęciu z pudełka (używa Ajax do ochrony siatki podczas dodawania, usuwania danych i integruje się z jquery.

Chciałbym zamieścić kilka przykładów, ale w tej chwili na iPadzie.

Trevor North
źródło