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:
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>
Antwoord 5, autoriteit 4%
Adapt-Strap. Hier is de viool.
Het is extreem licht en heeft dynamische rijhoogten.
<ad-table-lite table-name="carsForSale"
column-definition="carsTableColumnDefinition"
local-data-source="models.carsForSale"
page-sizes="[7, 20]">
</ad-table-lite>
Antwoord 6, autoriteit 2%
Zoals vermeld in andere antwoorden: voor een tabel met zoeken, is selecteren en pagineren “ng-grid” de beste optie. Een paar dingen die ik ben tegengekomen, zal ik noemen die nuttig kunnen zijn tijdens de implementatie:
Omgeving instellen:
-
http://www.json-generator.com/om JSON te genereren gegevens. Het is een behoorlijk coole tool om je voorbeeldgegevensset te krijgen om de ontwikkeling sneller te maken.
-
U kunt deze plunker controleren voor uw implementatie. Ik heb gewijzigd om op te nemen: zoeken, selecteren en paginering
http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview
Je kunt deze tutorial over Smart table bekijken, geeft alle informatie die je nodig hebt:
http://lorenzofox3.github.io/smart-table-website/
Dan is de volgende vraag bootstrap 3
:
Het is niet precies, maar deze sjablonen zien er goed uit.
– Je kunt gewoon https://github.com/angular-ui/bootstrap gebruiken /tree/master/templatealle sjablonen zijn goed geschreven.
Ik kan doorgaan over het converteren van bootstrap 3 naar angularjs, maar het wordt al genoemd in de volgende links:
- Bootstrap 3 compatibel met de huidige AngularJS bootstrap-richtlijnen?
- https://github.com/angular-ui/bootstrap/issues/331
Houd er rekening mee dat u met betrekking tot smart-table moet controleren of deze klaar is voor uw hoekige versie
Antwoord 7
Kendo grid is net zo goed als Wijmo. Ik weet dat Kendo wordt geleverd met Angular-bindingen voor hun gegevensbron en ik denk dat Wijmo een Angular-plug-in heeft. Geen van beide is echter gratis.