De beste manier om een ​​raster of tabel in AngularJS weer te geven met Bootstrap 3?

Ik ben een app aan het maken met AngularJS en Bootstrap 3. Ik wil een tabel/raster met duizenden rijen laten zien. Wat is de best beschikbare besturing voor AngularJS & Bootstrap met functies zoals sorteren, zoeken, paginering enz.

Antwoord 1, autoriteit 100%

Na het uitproberen van ngGrid, ngTable, trNgGrid en Smart Table, ben ik tot de conclusie gekomen dat Smart Tableis verreweg de beste implementatie AngularJS-wise en Bootstrap-wise. Het is op precies dezelfde manier gebouwd als wanneer u uw eigen, naïeve tafel zou bouwen met behulp van standaard hoekig. Bovendien hebben ze een paar richtlijnen toegevoegd die je helpen bij het sorteren, filteren enz. Hun aanpak maakt het ook vrij eenvoudig om jezelf uit te breiden. Het feit dat ze de reguliere html-tags voor tabellen en de standaard ng-repeat voor de rijen en standaard bootstrap voor opmaak gebruiken, maakt dit mijn duidelijke winnaar.

Hun JS-code is afhankelijk van de hoek en uw html kan afhankelijk zijn van bootstrap als u dat wilt. De JS-code is in totaal 4 kb en je kunt er zelfs gemakkelijk dingen uit halen als je een nog kleinere footprint wilt bereiken.

Waar de andere rasters je claustrofobie bezorgen in verschillende gebieden, voelt Smart Table gewoon open en to the point aan.

Als u sterk afhankelijk bent van inline bewerking en andere geavanceerde functies, kunt u bijvoorbeeld sneller aan de slag met ngTable. Het staat u echter vrij om dergelijke functies vrij eenvoudig toe te voegen in Smart Table.

Mis Smart Tableniet!!!

Ik heb geen relatie met Smart Table, behalve dat ik het zelf gebruik.

Antwoord 2, autoriteit 52%

Ik had dezelfde eis en loste het op met deze componenten:

• AngularJS 1.0.8
• AngularUI Boostrap 0.10.0: compatibel met AngularJS 1.0.8 en Boostrap CSS 3. x.
• ng-grid 2.0.7: compatibel met AngularJS 1.0.8
• Bootstrap CSS 3.0

De tabelcomponent ng-grid kan honderden rijen weergeven in een schuifbaar raster.
Als u duizenden inzendingen moet verwerken, kunt u beter de paginator van ng-grid gebruiken.
De documentatie van ng-grid is uitstekend en bevat veel voorbeelden.
Sorteren en zoeken wordt ondersteund, zelfs in combinatie met paginering.

Hier is een screenshot van een huidig ​​project om u een indruk te geven hoe het eruit ziet:

[UPDATE juli 2017]

Na een paar jaar ng-grid in productie te hebben gehad, kan ik nog steeds zeggen dat er geen grote problemen zijn met dit onderdeel. Ja, veel kleine bugs, maar geen showstoppers (tenminste in mijn gebruiksgevallen). Dat gezegd hebbende, raad ik het gebruik van dit onderdeel ten zeerste af als je een project helemaal opnieuw begint. Deze component is alleen een goede optie als je gebonden bent aan AngularJS 1.0.x. Als je vrij bent om de Angular-versie te kiezen, ga dan voor een nieuwer onderdeel. Een lijst met tabelcomponenten voor Angular 4 is samengesteld door Sam Deering in deze blog .

Antwoord 3, autoriteit 39%

Met “duizenden rijen” zou je natuurlijk het beste kunnen kiezen voor paging aan de serverzijde. Toen ik een tijdje terug naar de verschillende AngularJs-tabel/raster-opties keek, waren er drie duidelijke favorieten:

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

Alle drie zijn goed, maar anders geïmplementeerd. Welke die je kiest, zal waarschijnlijk meer zijn gebaseerd op persoonlijke voorkeur dan wat dan ook.

ng-rast is waarschijnlijk het meest bekend vanwege zijn associatie met hoekige-ui , maar ik liever ng-tafel , ik hou echt van hun implementatie en hoe u het gebruikt, en Ze hebben geweldige documentatie en voorbeelden beschikbaar en actief worden verbeterd.

Antwoord 4, autoriteit 4%

Je kunt bootstrap 3-klassen gebruiken en een tabel maken met behulp van de ng-repeat-richtlijn

Voorbeeld:

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>

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