Najlepszy sposób reprezentowania siatki lub tabeli w AngularJS za pomocą Bootstrap 3? [Zamknięte]


284

Tworzę aplikację za pomocą AngularJS i Bootstrap 3. Chcę pokazać tabelę / siatkę z tysiącami wierszy. Jaka jest najlepsza dostępna kontrola dla AngularJS i Bootstrap z funkcjami takimi jak Sortowanie, Wyszukiwanie, Paginacja itp.


6
Na pewno powinieneś rzucić
mainguy

1
Dlaczego nie skorzystać z Bootstrap interfejsu użytkownika? Niedawno zaktualizowano, aby używać Bootstrap 3: angular-ui.github.io/bootstrap
CallumVass

3
Te tysiące wierszy nie powinny być wysyłane do klienta. Dlatego czyste rozwiązanie JavaScript nie zadziała tak dobrze. Serwer będzie musiał dokonać podziału na strony i / lub wyszukać cię.
flup

Następnym razem postaraj się wypróbować ngTasty table zizzamia.com/ng-tasty/directive/table opiera się na bootstrap css table :)
zizzamia

3
angular przenosi się do „ interfejsu ui-grid ”, który miałby wbudowane funkcje tabeli. dobra alternatywa dla „
baz

Odpowiedzi:


223

Po wypróbowaniu ngGrid, ngTable, trNgGrid i Smart Table doszedłem do wniosku, że Smart Table jest zdecydowanie najlepszą implementacją pod względem AngularJS i Bootstrap. Jest zbudowany dokładnie tak samo, jak przy tworzeniu własnego, naiwnego stołu przy użyciu standardowego kąta. Ponadto dodali kilka dyrektyw, które pomagają w sortowaniu, filtrowaniu itp. Ich podejście ułatwia także samodzielne rozszerzanie się. Fakt, że używają zwykłych tagów HTML dla tabel i standardowego powtórzenia ng dla wierszy i standardowego bootstrapu do formatowania, czyni mnie moim wyraźnym zwycięzcą.

Ich kod JS zależy od kąta, a twój HTML może zależeć od bootstrap, jeśli chcesz. Kod JS ma w sumie 4 kb i możesz nawet łatwo wybierać stamtąd, jeśli chcesz osiągnąć jeszcze mniejszy rozmiar.

Tam, gdzie inne siatki dają klaustrofobię w różnych obszarach, Smart Table wydaje się otwarty i do rzeczy.

Jeśli polegasz w dużej mierze na edycji bezpośredniej i innych zaawansowanych funkcjach, możesz na przykład szybciej zacząć działać z ngTable. Jednak możesz swobodnie dodawać takie funkcje w Smart Table.

Nie przegap Smart Table !!!

Nie mam żadnego związku ze Smart Table, poza tym, że sam go używam.


12
Właśnie znalazłem mały błąd w Smart Table, zgłosiłem go i został naprawiony w ciągu kilku godzin. Dziwi mnie, że nie wszyscy używają Smart Table - jest o wiele lepszy niż wszystkie inne.
Ricky Helgesson

1
Smart Table jest zdecydowanie najlepszym wyborem dla AngularJS. NgGrid oferuje więcej funkcji, ale można je łatwo dodać, rozszerzając Smart Table.
Toilal

1
ng-grid 3.0.7 został już wydany i działał dobrze dla mnie (teraz nazywany ui-grid)
Kimball Robinson

1
Problem polega na tym, że paginacja na inteligentnym stole jest naprawdę brzydka, brak pierwszej strony, ostatniej strony, podział stron na stół ng jest naprawdę bardziej ergonomiczny. To samo dotyczy sortowania: na inteligentnym stole nie wiemy, że możemy sortować przed kliknięciem, w ogóle nie jest ergonomiczny ...
amdev,

1
Inteligentna tabela dla trywialnych scenariuszy tylko do odczytu, ui-grid do wszystkiego innego lub po prostu ui-grid :)
RandomUs1r

116

Miałem ten sam wymóg i rozwiązałem go za pomocą następujących elementów:

Komponent tabeli ng-grid może wyświetlać setki wierszy na przewijanej siatce. Jeśli masz do czynienia z tysiącami wpisów, lepiej skorzystać z paginatora ng-grid. Dokumentacja ng-grid jest doskonała i zawiera wiele przykładów. Sortowanie i wyszukiwanie są obsługiwane nawet w połączeniu z paginacją.

Oto zrzut ekranu z bieżącego projektu, aby pokazać Ci, jak to wygląda:

wprowadź opis zdjęcia tutaj

[AKTUALIZACJA lipiec 2017 r.]

Po kilku latach pracy w sieci ng-grid nadal mogę stwierdzić, że nie ma większych problemów z tym komponentem. Tak, wiele drobnych błędów, ale nie ma ograniczeń pokazowych (przynajmniej w moich przypadkach użycia). Powiedziawszy to, zdecydowanie odradzam korzystanie z tego komponentu, jeśli zaczniesz projekt od zera. Składnik ten jest dobrym rozwiązaniem tylko wtedy, gdy jesteś zobowiązany do angularjs 1.0.x . Jeśli możesz wybrać wersję Angular, wybierz nowszy komponent. Lista składników tabeli dla Angulara 4 została opracowana przez Sama Deeringa na tym blogu .


2
Wijmo zapewnia również dyrektywy Angular wraz z funkcjami takimi jak grupowanie, sortowanie itp. Możesz także sprawdzić próbkę porównawczą dla ngGrid i Wijmo Grid z AngularJS: demos.componentone.com/wijmo/Angular/GridBenchmark/...
Ashish

@Lars Behnke Jak zastosować styl tabeli Bootstrap do ng-grid? O ile spojrzałem, ng-grid nie używa znaczników table tr, na które liczą css Bootstrap.
elpddev,

Implementacja komponentu ng-grid nie jest oparta na Bootstrap. Więc dostosowałem ng-grid.less, aby uzyskać wygląd jak najbardziej zbliżony do elementów GUI bootstrap.
Lars Behnke,

1
Projekt ng-grid został przepisany jako UI Grid, który jest dostępny na stronie ui-grid.info
mostar

2
Statystyki za 2016 r. Pokazują, że wtyczka ng-table jest wciąż pożądana: GitHub: A. ng-grid: ~ 3500 zatwierdzeń, ~ 800 problemów. B. smart-table: ~ 300 zatwierdzeń, ~ 40 problemów. C. ng-table: ~ 500 zatwierdzeń, ~ 200 problemów. Trendy Google tylko potwierdzają ten sam pomysł, porównując: „kątowy inteligentny stół”, „kątowy siatka interfejsu użytkownika”, „kątowy stół ng”. google.com/trends/…
Anton Lyhin

87

W przypadku „tysięcy wierszy” najlepszym rozwiązaniem byłoby oczywiście stronicowanie po stronie serwera. Kiedy jakiś czas temu sprawdzałem różne opcje tabeli / siatki AngularJs, zauważyłem trzy wyraźne faworytów:

Wszystkie trzy są dobre, ale zaimplementowane inaczej. Który wybierzesz będzie prawdopodobnie bardziej oparty na osobistych preferencjach niż cokolwiek innego.

ng-grid jest prawdopodobnie najbardziej znany ze względu na jego powiązanie z angular-ui, ale ja osobiście wolę ng-table , bardzo podoba mi się ich implementacja i sposób korzystania z niego, a oni mają świetną dokumentację i przykłady i są aktywnie ulepszane.


7
Cieszyłem się, że ktoś wspomniał o stoliku. Ja też wolę tabelę ng niż ng-grid, ponieważ ma ona lepszą stylizację, szczególnie w trybie edycji.
Rob J

2
Wskocz na modę ngTable tutaj. Poszedłem z ng-grid do projektu i było to dość okropne. Poszedłem z ng-grid wyłącznie ze względu na jego związek z angular-ui i wydaje się, że jest trochę bardziej aktywny na github. Myślę, że zamierzam przejść na ngTable. Mam nadzieję, że nie będzie to zbyt trudne.
Brett,

10
Hej, nowicjuszu z ekosystemem kątowym, początkowo próbowałem korzystać z ng-grid ze względu na „lepszą” stronę internetową, ale szybko natknąłem się na problemy ze stylizacją, z powodu głęboko zagnieżdżonej struktury div. Do tej pory bardziej lubię ng-table, ponieważ tak naprawdę używa table. Mogę po prostu zastosować klasę tabeli ładowania początkowego i to działa ...
Pierre Henry

1
Zwróć uwagę, że kod i podejście do smart-table zmieniło się radykalnie w wersji v1.0.0 (sierpień 2014), więc komentarze zgłoszone przed tą datą nie są już istotne
laurent

4
Stół ng został w większości uśpiony, ponieważ jest utrzymywany przez jedną osobę na Ukrainie i było tam wiele innych problemów. ng-grid jest ponownie zapisywany jako ui-grid dla wersji 3.0, ale nie jest gotowy do produkcji. Dlatego teraz ogólnie nie jest dobry czas na wybór lub zmianę implementacji tabeli kątowej. Smart-Table jest również utrzymywany przez mniej więcej jedną osobę. Obecnie używamy tabeli ng, ale planujemy przejść na interfejs ui-grid w miarę dojrzewania.
Splaktar

77

Bogata w funkcje siatka kątowa to:

trNgGrid

Niektóre z jego funkcji:

  • Został zbudowany z myślą o prostocie.
  • Używa zwykłych tabel HTML, umożliwiając przeglądarkom optymalizację renderowania.
  • W pełni deklaratywna, zachowująca separację problemów, pozwalająca w ten sposób w pełni opisać ją w HTML bez zakłócania działania kontrolerów.
  • Jest w pełni konfigurowalny za pomocą szablonów i dwukierunkowych atrybutów danych.
  • Łatwy w utrzymaniu, kod napisany w TypeScript.
  • Ma bardzo krótką listę zależności: AngularJs i Bootstrap CSS, z opcjonalnymi motywami Bootswatch.

trNgGrid

Cieszyć się. Tak, jestem autorem. Mam już dość wszystkich sieci Angular.


5
Ten potrzebuje trochę więcej uznania. Zacząłem od ngGrid. Nie mogłem się zorientować, której wersji powinienem użyć, bo chyba zacząłem szukać przejścia między wersjami 2.x do 3.x, a nawet nie byłem w stanie zmusić stołu do pracy. Potem przeniosłem się do ngTablejakiego rodzaju pracy. Nie mogłem uzyskać poprawnego sortowania lub stronicowania, ale to ze względu na sposób, w jaki ładowałem dane $http. Potem zobaczyłem to trNgGridi do cholery ... tak łatwo się uruchomić. Żałuję, że nie mogę tutaj napisać więcej, ale sugeruję, aby każdy spróbował najpierw!
Ronnie,

2
Całkowicie zgadzam się z @Ronnie. Należy zwrócić na to większą uwagę. Po całym dniu „walki” z ng-grid / ui-grid, aby zrobić coś nieco bardziej złożonego, spróbowałem trNgGrid i zacząłem od pierwszej próby.
Johnny Everson

4
wygląda dobrze, ale nie może znaleźć kluczowych elementów, takich jak stały nagłówek, kolumny o zmiennym rozmiarze, kolumny z możliwością przeciągania itp.
iLemming

czy bootstrap jest twardą zależnością? Chciałbym, aby moja siatka używała niestandardowego css. możliwy?
Jasdeep Singh

To wymaga większego uznania. Byłem tak blisko przejścia na ng-grid, aż zdałem sobie sprawę, że nawet nie używa tabel html.
ryanwinchester

39

Dla każdego, kto czyta ten post: Zrób sobie przysługę i trzymaj się z dala od ng-grid. Jest pełen błędów (naprawdę ... prawie każda część biblioteki jest jakoś zepsuta), deweloperzy porzucili obsługę gałęzi 2.0.x, aby pracować w wersji 3.0, która jest bardzo daleko od gotowości. Samodzielne rozwiązywanie problemów nie jest łatwym zadaniem, kod ng-grid nie jest mały i nie jest prosty, chyba że masz dużo czasu i głęboką znajomość kątów i ogólnie js, będzie to trudne zadanie.

Dolna linia: jest pełna błędów, a ostatnia stabilna wersja została porzucona.

Github jest pełen PR, ale są one ignorowane. A jeśli zgłosisz błąd w gałęzi 2.x, zostanie on zamknięty.

Wiem, że to proyect typu open source, a skargi mogą wydawać się trochę nie na miejscu, ale z perspektywy dewelopera szukającego biblioteki, to moja opinia. Spędziłem wiele godzin pracując z ng-grid w dużym stopniu, a bóle głowy nigdy się nie kończą


Czy możesz nam powiedzieć kilka przykładów tych błędów / scenariuszy, które sprawiły Ci ból głowy? Interesuje mnie to, że wybierając jedną z dobrze znanych opcji (ng-grid, trNgGrid, ng-table, SmartTable), zaczynam od ng-grid, a po przeczytaniu twojego postu i zobaczeniu 10 głosów pozytywnych przestraszyłem się!
sport

1
Cóż, niektóre z nich zostały naprawione, jak sądzę, połączyły się jak 20 żądanie ściągnięcia, które siedziały tam od miesięcy. Miałem problemy? wiele z nich było dlatego, że używali div zamiast tabeli do makijażu siatki. Również zdarzenia, które eksponuje siatka, są błędne, co sprawia mi wiele problemów, ponieważ implementowałem zachowanie typu nieskończonego przewijania, zdarzenie przewijania było uruchamiane losowo w niektórych sytuacjach, które nie powinny. Automatyczna szerokość kolumn w ogóle nie działa.
agusluc

Ostatecznie będzie to zależeć od tego, w jaki sposób chcesz korzystać z siatki i poziomu dostosowania wymaganego w projekcie. Sprawdź github, przeczytaj otwarte problemy, stwórz demo obejmujące wszystkie przypadki użycia i zobacz, jak to działa. Pamiętaj jednak, że dev gałąź 2.x została porzucona, więc w przyszłości będziesz mieć zerowe wsparcie.
agusluc

15

Jak dotąd TrNgGrid działa świetnie. Oto powody, dla których wolę go od ng-grid i przeniósł się do tego komponentu

  • Tworzy elementy tabeli, dzięki czemu można go uruchamiać i wykorzystywać całą moc bootstrap .css (ng-grid używa motywów interfejsu użytkownika jQuery).

  • Proste, dobrze udokumentowane opcje siatki.

  • Działa stronicowanie rozmiaru serwera


10

Na końcu tej odpowiedzi na pytanie, jak myśleć w Angular, jeśli masz doświadczenie w jQuery, w górnym poście Josh David Miller podsumowuje:

Nawet nie używaj jQuery. Nawet tego nie uwzględniaj. To cię powstrzyma. A kiedy dojdziesz do problemu, który Twoim zdaniem wiesz już jak rozwiązać w jQuery, zanim sięgniesz po niego $, spróbuj pomyśleć o tym, jak to zrobić w ramach AngularJS. Jeśli nie wiesz, zapytaj! 19 razy na 20, najlepszym sposobem na to nie jest jQuery, a próba rozwiązania problemu za pomocą jQuery daje więcej pracy.

Teraz, jeśli chcesz siatkę z mnóstwem funkcji i opcji dostosowywania, jQuery DataTables jest jednym z najlepszych. Siatki tylko kątowe, które widziałem, nie zbliżają się do tego, co może zrobić jTuery DataTables.

Jednak jQuery DataTables nie integruje się dobrze z AngularJS. (Podejmowano różne wysiłki, ale żadne nie zapewnia płynnej integracji).

Być może pozostawia to osobę z dwiema opcjami.

Pierwszym jest przejście na czystą siatkę kątową, która nie jest tak bogata w funkcje jak DataTables. Zgadzam się z @Moonstom na temat tego, że mam dość innych siatek Angular, a trNgGrid wygląda ładnie.

Drugą opcją jest powiedzenie: jest to jeden z tych rzadkich 1 na 20 przypadków, w których powinieneś użyć jQuery i skorzystać z wtyczki jQuery DataTables, ponieważ wysiłki zmierzające do ponownego wynalezienia koła z czystymi kątowymi siatkami przyniosły mniej wytrzymałe koło niż DataTables.

Byłoby miło, gdyby było inaczej, ale po prostu nie widziałem, aby ekosystem Angular miał tak silną siatkę jak jQuery DataTables, i nie jest tak, że dobra siatka danych jest przyjemna w aplikacji internetowej : dobra siatka jest niezbędna.


+1 Tak prawdziwe. Szkoda, że ​​DataTables nie zostało jeszcze zintegrowane; być może zbyt mocno związany z DOM.
CSSian


9

Możesz użyć klas bootstrap 3 i zbudować tabelę używając dyrektywy ng-repeat

Przykład:

angular.module('App', []);

function ctrl($scope) {
    $scope.items = [
        ['A', 'B', 'C'],
        ['item1', 'item2', 'item3'],
        ['item4', 'item5', 'item6']
    ];
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="App">
  <div ng-controller="ctrl">
    
    
    <table class="table table-bordered">
      <thead>
        <tr>
          <th ng-repeat="itemA in items[0]">{{itemA}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td ng-repeat="itemB in items[1]">{{itemB}}</td>
        </tr>
        <tr>
          <td ng-repeat="itemC in items[2]">{{itemC}}</td>
        </tr>
      </tbody>
    </table>
    
    
  </div>
</div>

przykład na żywo: http://jsfiddle.net/choroshin/5YDJW/5/

Aktualizacja:

lub zawsze możesz wypróbować popularny ng-grid , ng-grid jest dobry do sortowania, wyszukiwania, grupowania itp., ale nie testowałem go jeszcze na dużą skalę.


7
Tak, to standardowy sposób tworzenia tabeli bez sortowania, paginacji, filtrowania, raloadowania ajax itp. W Angular. Ale przy tysiącach rzędów zatrzyma to każde zastosowanie.
mainguy

Spowoduje to bardzo opóźniony interfejs użytkownika.
boi_echos

8

Pasek adaptacyjny . Oto skrzypce .

Jest niezwykle lekki i ma dynamiczne wysokości rzędów.

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>

Czy można zmienić szerokość kolumn?
Tomasz Waszczyk

4

Jak wspomniano w innych odpowiedziach: W przypadku tabeli z wyszukiwaniem najlepszym wyborem jest wybranie i podział na strony „ ng-grid ”. Kilka rzeczy, na które natknąłem się wspomnę, które mogą być przydatne podczas wdrażania:

Aby ustawić env:

  1. http://www.json-generator.com/ do generowania danych JSON. Jest to całkiem fajne narzędzie do pobierania przykładowego zestawu danych, aby przyspieszyć programowanie.

  2. Możesz sprawdzić ten plunker dla swojej implementacji. Zmodyfikowałem, aby uwzględnić: wyszukiwanie, wybieranie i paginację http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

Możesz sprawdzić ten samouczek na temat inteligentnego stołu, Daje wszystkie potrzebne informacje: http://lorenzofox3.github.io/smart-table-website/

Następne pytanie brzmi bootstrap 3: nie do końca, ale szablony wyglądają dobrze. - Możesz po prostu użyć https://github.com/angular-ui/bootstrap/tree/master/template, wszystkie szablony są dobrze napisane.

Mogę przejść dalej, jak przekonwertować bootstrap 3 na angularjs, ale jest już wspomniany w następujących linkach:

pamiętaj, że jeśli chodzi o smart-table, musisz sprawdzić, czy jest on gotowy do wersji kątowej


3

Siatka Kendo jest dobra, podobnie jak Wijmo. Wiem, że Kendo ma powiązania Angular dla swojego źródła danych i myślę, że Wijmo ma wtyczkę Angular. Żadne z nich nie jest jednak darmowe.


3
Miałem straszne doświadczenia z KendoUI. Jest tak napuchnięty, że biegnie jak pies i wydaje się być tak zhakowany w przypadku bardziej złożonych elementów, że trudno jest, jeśli nie niemożliwe, uruchomić funkcje, które nie są dostępne „po wyjęciu z pudełka”, że tak powiem. Jest również mocno przystosowany do pracy z komponentami serwera i bardzo słabo udokumentowany dla przypadków brzegowych. Trzymałbym się od nich z daleka!
Precastic
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.