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

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.

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.

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

• AngularJS 1.0.8
• AngularUI Boostrap 0.10.0 : Kompatybilny z AngularJS 1.0.8 i Boostrap CSS 3.x.
• ng-grid 2.0.7 : Kompatybilny z AngularJS 1.0.8
• Bootstrap CSS 3.0

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:

[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 .

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:

• ng-grid
• stolik ng
• Smart-Table

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.

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.

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

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ą

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

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.

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ę.

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>

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:

• Bootstrap 3 zgodny z aktualnymi dyrektywami AngularJS?
• https://github.com/angular-ui/bootstrap/issues/331

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

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.