Share
Dit is deel twee van een tweedelige serie over React-Bootstrap-Table. In deel één hebben we een eenvoudige React-applicatie gemaakt met behulp van react-create-app, React-Bootstrap-Table toegevoegd, een tabel met gegevens ingevuld, gewerkt met kolommen, de tabel opgemaakt en geselecteerde rijen.
In dit deel gaan we verder met de reis door rijen uit te breiden, rijen toe te voegen, rijen te verwijderen en paginering, celbewerking en geavanceerde aanpassing aan te brengen.
Dit is een van de coolste functies van React-bootstrap-table. Bij het weergeven van tabelgegevens zijn er vaak extra gegevens die u mogelijk op één of twee rijen wilt zien, maar u kunt niet alle gegevens voor alle rijen weergeven.
Een optie om dit aan te pakken is tooltips te tonen, maar tooltips vereisen dat u met de muis over het doelgebied beweegt en u kunt slechts één tooltip tegelijkertijd zien. Als u rijen uitvouwt, kunt u extra gegevens voor elke rij weergeven in een soort lade die zo lang wordt uitgevouwen als u wilt en u kunt deze samenvouwen wanneer u klaar bent. U kunt op hetzelfde moment zoveel rijen tegelijk uitbreiden als u wilt. Hier is hoe het gedaan is met React-bootstrap-table.
De liefdeskaart bevat relaties tussen sommige Arrested Development-personages: Gob houdt van Marta en Buster houdt van Lucile 2. Het isExpandable () functie bepaalt welke rijen uitvouwbaar zijn. In dit geval wordt true geretourneerd voor rijen waarvan de tekennaam op de liefdekaart staat. De expandRow () functie retourneert een component wanneer een rij is uitgevouwen.
Het geretourneerde onderdeel wordt onder de rij weergegeven totdat de rij is samengevouwen. Het configureren van rijuitbreiding is een beetje lastig. Sommige opties zijn alleen rekwisieten op het onderdeel BootstrapTable.
De uitbreidingskolomopties zijn één objectprop, en dan is er een prop genaamd opties die extra rijuitbreidingsopties zoals bevat expandRowBgColor en uitbreiden. Het zou veel eenvoudiger zijn als er maar één prop werd gebeld expandRowProp dat bevatte alle opties (zoals de selectRowProp).
import Reageren, Component uit 'reageren' importeren BootstrapTable, TableHeaderColumn uit 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'const loveMap = Gob:' Martha ', Buster:' Lucile 2 ', function isExpandableRow (rij) return row [' name '] in loveMap; functie expandRow (rij) return ()row ['name'] houdt van lovemap [rij ['naam']].
); class Table5 breidt Component render () uit const options = expandRowBgColor: 'pink', expanding: [1] // aanvankelijk uitgebreid return () exporteer standaard Tabel5ID kaart Naam Waarde
Tot nu toe hebben we slechts drie rijen met gegevens weergegeven. Tabellen zijn ontworpen om veel gegevens weer te geven die niet noodzakelijkerwijs op het scherm passen. Dat is waar paginering binnenkomt. React-bootstrap-table ondersteunt vele pagineringopties.
Laten we onze tabel vullen met 100 items, elk tien pagina's met tien items. We zullen een getData () -functie gebruiken die een array van 100 objecten retourneert met id's, namen en waarden op basis van hun index.
Laten we ook opgeven welke pagina in eerste instantie moet worden weergegeven (4), de tekst aanpassen voor vorige, volgende, eerste en laatste pagina (met Unicode-pijlen voor extra koelheid) en uiteindelijk een aangepaste functie met de naam showTotal () leveren om het totale aantal items weer te geven. Merk op dat het attribuut voor het besturen van de knop van de vorige pagina "prePage" en niet "prevPage" wordt genoemd (het kreeg mij). Alle pagineringopties gaan naar het algemene "opties" -attribuut van de tabel.
import Reageren, Component uit 'reageren' importeren BootstrapTable, TableHeaderColumn uit 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'function getData () var data = [] for (var i = 0; i < 100; ++i) data[i] = id: i, name: 'item_' + i, value: i return data function showTotal() returnEr zijn 100 items totaal
class Table6 breidt Component render () uit const options = page: 4, prePage: '⟵', nextPage: '⟶', firstPage: '⟸', lastPage: '⟹', paginationShowsTotal: showTotal return () exporteer standaard Tabel6ID kaart Naam Waarde
Tot nu toe hebben we de tabel gebruikt om informatie op verschillende manieren weer te geven. Maar tabellen kunnen worden gebruikt als een gebruikersinterface voor het manipuleren van gegevens. Laten we zien hoe rijen uit een tabel kunnen worden toegevoegd en verwijderd.
De belangrijkste kenmerken zijn insertRow en Verwijder rij. Wanneer u ze opgeeft, worden de knoppen "Nieuw" en "Verwijderen" toegevoegd. Als u op de knop "Nieuw" klikt, wordt een modaal dialoogvenster geopend waarin u nieuwe rijen kunt toevoegen. Als u op de knop "Verwijderen" klikt, worden alle geselecteerde rijen verwijderd. Als u rijen wilt verwijderen, moet u uiteraard rijselectie inschakelen. U kunt ook haakfuncties toevoegen die worden aangeroepen nadat u rijen hebt toegevoegd of verwijderd.
Accentsconagua
import Reageren, Component uit 'reageren' importeren BootstrapTable, TableHeaderColumn uit 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'function onInsertRow (rij) let newRowStr = "for (const prop in rij) newRowStr + = prop +': '+ row [prop] +' \ n ' alert (' Je hebt ingevoegd: \ n '+ newRowStr ) function onDeleteRow (rowKeys) alert ('Je verwijderd:' + rowKeys) class Tabel 7 breidt Component render () uit const options = afterInsertRow: onInsertRow, afterDeleteRow: onDeleteRow // Om rijen te verwijderen die je kunt selecteren rows const selectRowProp = mode: 'checkbox' return ( ID kaart Naam Waarde ) exporteer standaard Tabel 7
Een andere vorm van gegevensmanipulatie is interne bewerking (bewerking van de mobiele cel). Celbewerking kan worden geactiveerd door een klik of dubbelklik. Celbewerking wordt bestuurd door het kenmerk "cellEdit". Naast de modus kunt u niet-bewerkbare rijen en haakfuncties opgeven.
In de volgende code, de nonEditableRows functie retourneert eenvoudig de rijsleutel 3, maar kan een meer geavanceerde logica gebruiken.
import Reageren, Component uit 'reageren' importeren BootstrapTable, TableHeaderColumn uit 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'class Table8 breidt Component render () uit const cellEditProp = mode:' click ', //' dbclick 'voor trigger door te dubbelklikken op nonEditableRows: function () return [3]; terug () exporteer standaard Tabel 8ID kaart Naam Waarde
Soms is het niet genoeg om uw gegevens te bekijken en ermee te spelen in een web-UI, en u moet uw gegevens opnemen en deze naar andere hulpprogramma's sturen. De manier om het te doen met React-bootstrap-table is heel eenvoudig. U voegt gewoon het exportCSV-attribuut (en optioneel een bestandsnaam) toe en er is een exportknop toegevoegd. Wanneer u op de knop klikt, kunt u uw gegevens opslaan in een CSV-bestand.
import Reageren, Component uit 'reageren' importeren BootstrapTable, TableHeaderColumn uit 'react-bootstrap-table' import '... /css/Table.css' import '... /dist/react-bootstrap-table-all.min. css 'class Table9 breidt Component render () return uit () exporteer standaard Tabel9ID kaart Naam Waarde
Hier zijn de geëxporteerde gegevens van onze kleine tafel:
"id", "naam", "waarde" "1", "Gob", "2" "2", "Buster", "5" "3", "George Michael", "4"
We hebben veel materiaal gedekt, maar React-bootstrap-table heeft nog veel meer in petto. In de praktijk kan elk aspect worden aangepast. Lees de volledige documentatie over het aanpassen van een tabel.
Hier is een lijst met aanpasbare onderdelen:
React-bootstrap-table biedt een krachtige stoot. Het biedt out-of-the-box een prettige gebruikersinterface voor het weergeven, zoeken en manipuleren van tabellarische gegevens. De API is zeer consistent - belangrijke functies kunnen worden ingeschakeld door een eenvoudig kenmerk op te geven en optioneel aan te passen met extra kenmerken die vaak dynamische functies kunnen zijn.
Hoewel het standaardgedrag en de basisconfiguratie de meeste gebruikers zouden moeten bevredigen, als u meer geavanceerde functies en aanpassingen nodig hebt, is er voldoende documentatie en voorbeelden over hoe u dit moet aanpakken.
In de afgelopen paar jaar is React in populariteit gegroeid. In feite hebben we een aantal items op de markt die beschikbaar zijn voor aankoop, beoordeling, implementatie enzovoort. Als u op zoek bent naar extra bronnen rond React, aarzel dan niet om ze te bekijken.
