Najlepszy sposób na reprezentowanie siatki lub tabeli w AngularJS z Bootstrap 3? [zamknięte]

Miałem ten sam wymóg i rozwiązałem go za pomocą tych komponentó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 w przewijalnej siatce. Jeśli masz do czynienia z tysiącami wpisów jesteś lepiej off używając 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 dać Ci wrażenie, jak wygląda:

[aktualizacja lipiec 2017]

Po kilku latach produkcji ng-grid nadal mogę stwierdzić, że nie ma większych problemów z tym komponentem. Tak, dużo drobnych błędów, ale No Show stoppers(przynajmniej w moich przypadkach użycia). Powiedziawszy to, zdecydowanie radzę nie używać tego komponentu, jeśli rozpoczynasz projekt od zera. Ten komponent jest dobrym rozwiązaniem tylko wtedy, gdy jesteś związany z AngularJS 1.0.x . Jeśli możesz wybrać wersję kątową, wybierz nowszy komponent. Lista elementów tabeli dla Angular 4 została skompilowana przez Sama Deeringa w ten blog .

Z "tysiącami wierszy" najlepszym rozwiązaniem byłoby oczywiście wykonanie stronicowania po stronie serwera. Kiedy jakiś czas temu przyjrzałem się różnym opcjom tabeli/siatki AngularJs, były trzy wyraźne ulubione:

• ng-grid
• ng-table
• Smart-Table

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

Ng-grid {[5] } jest prawdopodobnie najbardziej znany ze względu na jego skojarzenie z angular-ui, ale osobiście wolę ng-table, bardzo podoba mi się ich implementacja i sposób jej używania, a mają świetną dokumentację i przykłady dostępne i aktywnie są ulepszane.

Bogata w funkcje siatka kątowa to ta:

TrNgGrid

Niektóre z jego cech:

Został zbudowany z myślą o prostocie.
• używa zwykłych tabel HTML, pozwalając przeglądarkom na optymalizację renderowania.
• w pełni deklaratywny, zachowując oddzielenie obaw, pozwalając w ten sposób na pełne opisanie go w HTML, bez mieszania kontrolerów.
• jest w pełni konfigurowalny za pomocą szablonów i dwukierunkowej granicy danych atrybuty.
• łatwy w utrzymaniu, mając kod napisany maszynopisem.
• ma bardzo krótką listę zależności: AngularJs i Bootstrap CSS, z opcjonalnymi motywami Bootswatch.

Enjoy. Tak, jestem autorem. Mam dość tych wszystkich kanciastych siatek.

Dla osób czytających 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ęść Lib jest w jakiś sposób zepsuta), deweloperzy porzucili wsparcie 2.0.x branch, aby pracować w 3.0, który jest bardzo daleko od bycia gotowym. Naprawianie problemów samemu nie jest łatwym zadaniem, kod ng-grid nie jest mały i nie jest prosty, chyba że masz dużo czasu i głęboką wiedzę na temat angular i js w ogóle, to będzie trudne zadanie.

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

Github jest pełen PR - ów, ale są one ignorowane. A jeśli zgłosisz błąd w 2.oddział x, zamknięte.

Wiem, że jest open source proyect i narzekania mogą brzmieć trochę nie na miejscu, ale z perspektywy dewelopera szukającego biblioteki, to moje zdanie. Spędziłem wiele godzin pracując z ng-grid w dużym proyeccie i headcaches are never ending

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

• Sprawia, że elementy tabeli, dzięki czemu może być bootswatched i korzystać z całej mocy bootstrap .css (ng-grid używa jQuery UI themes).

• Proste, dobrze udokumentowane opcje siatki.

• Rozmiar serwera działa stronicowanie

Na końcu tej odpowiedzi na pytanie, jak myśleć w Angular, jeśli masz tło jQuery, top post od Josha Davida Millera podsumowuje:

Nawet nie używaj jQuery. Nawet tego nie włączaj. To cię powstrzyma. A kiedy przychodzi do problemu, który wydaje ci się, że wiesz, jak rozwiązać w jQuery, zanim sięgniesz po $, zastanów się, jak zrób to w granicach AngularJS. Jeśli nie wiesz, zapytaj! 19 times out of 20, najlepszym sposobem, aby to zrobić nie trzeba jQuery i spróbować aby rozwiązać go z jQuery skutkuje więcej pracy dla Ciebie.

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

Jednak, jQuery DataTables nie integruje się dobrze z AngularJS. (Były różne wysiłki, ale żaden nie oferuje bezproblemowe integracja.)

Może to pozostawia osobie dwie opcje.

Pierwszy polega na zastosowaniu czystej siatki kątowej, która nie jest tak bogata w funkcje jak dane. Zgadzam się z @Moonstom, że mam dość innych kanciastych siatek na zewnątrz i trNgGrid ładnie wygląda.

Drugą opcją jest stwierdzenie: jest to jeden z tych rzadkich 1 z 20 przypadków gdzie powinieneś użyć jQuery i przejść z wtyczką jQuery DataTables, ponieważ wysiłki na rzecz ponownego wynalezienia koła z czystymi siatkami kątowymi mają daje mniej wytrzymałe koło niż DataTables.

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/

Update:

Lub zawsze możesz spróbować popularnego ng-grid , ng-grid jest dobry do sortowania, wyszukiwania, grupowania itp., ale nie testowałem go jeszcze na dużych danych.

Adapt-Strap . 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: dla tabeli z wyszukiwaniem, select i paginacji "ng-grid" jest najlepszą opcją. Kilka rzeczy, na które się natknąłem, wspomnę, które mogą być przydatne podczas implementacji:

Aby ustawić env:

1. Http://www.json-generator.com / do generowania danych JSON. To całkiem fajne narzędzie, aby uzyskać przykładowy zestaw danych, aby przyspieszyć rozwój.

2. Możesz sprawdzić ten plunker dla swojej realizacji. Mam zmodyfikowano o: Wyszukiwanie, zaznaczanie i stronicowanie http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview

Możesz sprawdzić ten samouczek o Smart table, daje wszystkie potrzebne informacje: http://lorenzofox3.github.io/smart-table-website/

Następne pytanie brzmi:bootstrap 3 : To nie do końca, ale te 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ę kontynuować o tym, jak przekonwertować bootstrap 3 na angularjs, ale jego już wspomniano w następujących linkach:

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

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

Siatka Kendo jest dobra tak samo jak Wijmo. Wiem, że Kendo ma wiązania kątowe dla ich źródła danych i myślę, że Wijmo ma wtyczkę kątową. Ani za darmo.