Kuinka luoda mahtava varastotaulukko React 16: n avulla

React 16 on Reactin ensimmäinen versio, joka on rakennettu Reaktin uuden ydinarkkitehtuurin päälle, nimeltään ”Fiber”. React 16 on suunniteltu alusta asti tukemaan asynkronista renderointia. Tämä mahdollistaa suurten komponenttipuiden käsittelemisen estämättä pääkäyttölankaa.

React 16 on suosittu, koska se tukee useita avaintoimintoja, kuten poikkeusten kaappaaminen virherajoilla, useiden komponenttien palauttaminen renderöinnistä, pienentynyt tiedostokoko ja sen tuki MIT-lisenssille.

Tietopohjaisen verkkosovelluksen, kuten Stocks-laskentataulukon, rakentamiseksi tarvitset taulukkolaskentaisen käyttöliittymän, jotta käyttäjät voivat näyttää tietoja.

Varastot laskentataulukko

Käyttäjät odottavat sovelluksesi laskentataulukon kykenevän:

  • Vieritys kiinteällä otsikolla
  • Lajittelu napsauttamalla sarakkeen otsikkoa
  • Tiettyjen sarakkeiden näyttäminen ja piilottaminen
  • Sivun haku, ryhmittely ja yhteenveto
  • Tietojen muokkaaminen soluissa
  • Vienti Exceliin
  • Poraus alas / rivin laajennus

Laskentataulukko tai ruudukko voi kuitenkin olla yksi vaikeimmista ja monimutkaisimmista käyttöliittymäkomponenteista Reaktessa. Tämä johtuu siitä, että monet tarvittavat ominaisuudet vaativat sekä merkittävää React-asiantuntemusta että halua ja kykyä kaivautua DOM: iin.

Jos haluat koodata ruudukon HTML-taulukkoa tai muuta kolmannen osapuolen komponenttia käyttämällä, sinun on otettava käyttöön useita yleisiä ominaisuuksia. Näihin ominaisuuksiin kuuluu napsauttamalla ruudukkorivin otsikkoa lajitellaksesi tai napsauttamalla jakajaa sarakkeen otsikon välillä koon muuttamiseksi tai liukusäätimen hakulaitetta ja hakemalla seuraavaa tietosivua.

Tämän sovelluksen nopeasti rakentamiseen käytämme Senchan ExtReact-komponentteja. Sencha's ExtReact on komponenttijoukko, joka sisältää yli 115 esivalmistettuja käyttöliittymäkomponentteja, jotka voit helposti integroida React 16 -sovellusten kanssa. Yksi ExtReactin avainkomponenteista on Grid. Se tarjoaa laskentataulukon kaltaiset toiminnot, joita tarvitaan varastotaulukkolaskentaohjelman nopeasti luomiseen. Käytämme ExtReact-ruutua, jotta voimme näyttää tietoja osake- ja osakeyhtiöistä.

Aloitetaan varastosovelluksen rakentamisella Senchan ExtReact-ruudukolla.

Rakennustelineiden laskentataulukko App

Luo sovellustelineitä noudattamalla seuraavia vaiheita:

  • Varmista, että solmuympäristö on määritetty

Varmista ensin, että järjestelmässäsi on asetukset Solmu 8.11+ ja NPM 6+. Voit ladata uusimman Node-version Node-verkkosivustolta. Jos olet jo asentanut Solmun, voit tarkistaa Node- ja npm-versiot helposti käyttämällä näitä komentoja: node -v ja npm -v

  • Hanki kirjautumistietosi ExtReact NPM -repo-ohjelmaan

ExtReact NPM -paketit isännöidään Senchan yksityisellä NPM-repolla. Kirjaudu sisään kyseiseen repoon kerran saadaksesi pääsyn kaikkiin ExtReact-paketteihin. Saat kirjautumistiedot siirtymällä ExtReact 30-päivän ilmaisen kokeiluversion sivulle ja täyttämällä lomake. Lähetämme sinulle sähköpostiviestin, jossa on sisäänkirjautumistiedot ja linkkejä resursseihin, kuten asiakirjat ja näyteprojektit.

  • Kirjaudu ExtReact NPM: n repo-ohjelmiin ja hanki sovellusgeneraattori

Seuraava vaihe on kirjautua sisään Senchan yksityiseen npm-repoon, joka isännöi ExtReact-paketteja. Liitä npm-kirjautumistunnuksesi (toimitettu ExtReact-kokeilusähköpostiviestissä) yhdistääksesi npm-repo @sencha-laajuuteen ja kirjoita käyttöoikeustiedot, kun sitä pyydetään:

Npm sisäänkirjautuminen - register = http: //npm.sencha.com - laajuus = @ sencha

Seuraava vaihe on asentaa ExtReact-generaattoripaketti.

npm install -g @ sencha / ext-react-gen
  • Luo ensimmäinen React-sovelluksesi

Suorita ensimmäinen ExtReact-sovellus suorittamalla ExtReact-sovellusgeneraattori:

ext-react-gen app your-app-name-here -i

Sovellusgeneraattori esittää sinulle muutamia kysymyksiä - kuten sovelluksesi nimen. Oletusarvoisesti sovellus käyttää Materiaaliteemoa (perustuu Googlen Materiaalisuunnitteluohjeisiin) ja on hyvä valinta aloitusteemaksi.

Valitse ”Luo ​​tyhjä sovellus” yhdessä kehotteista. Generaattori kehottaa sinua myös luomaan uuden hakemiston projektillesi. Generaattori sitten lataa ja luo näytteen sovelluksen, mukaan lukien asiaankuuluvat riippuvuudet.

  • Suorita React-sovelluksesi

Generaattorilähdössä löydät vaiheet sovelluksen suorittamiseksi. Vaihda uuteen sovellushakemistoon ja aja sovellus käyttämällä:

npm alku

Tämä käynnistää sovelluksen, ja tyhjä React-sovelluksesi näkyy juuri sovelluksen otsikossa. Sovelluksen pääkomponentilla (esim. StocksGrid) on yksi säilö juuressa. Tämä on merkitty koko näytöllä, asettelu on asetettu sopivaksi, mikä tarkoittaa, että se venyttää lastaan ​​täyttääkseen sen.

Katso tämän vaiheen koodi GitHubissa.

Varastojen ruudukon lisääminen sovellukseen

Lisää kantatiedot

Lisäämme sovellukseen 10 000 rivin esimerkillisen tietojoukon, nimeltään stocks.json. Jokainen tietorivi sisältää yrityksen nimen, ticker-symbolin, toimialan ja toimialat, joissa ne ovat. Rivi sisältää myös joukon punkkeja, jotka ovat kyseisen varaston viittä viimeistä myyntiä.

Nämä ovat tiedot, jotka aiomme näyttää ruudukossamme. Tässä opetusohjelmassa aiomme ladata tietoja staattisesti stock.json-tiedostosta, mutta voit myös rakentaa taustalevyn sovellusliittymän saadaksesi saman tiedon.

Perustason ruudukon luominen

StockGrid React -komponentissa renderöintimenetelmässä palautetaan ruudukko, jossa on sarakkeet.

Jos haluat lisätä sarakkeita ruudukkoomme, käytämme Sarake-komponenttia. Sarakekomponentti ottaa tietoindeksin, joka on sama kuin kantatietojen nimikenttä. Sarake vie tekstiprofiilin, joka on sarakkeen otsikkoteksti. Voimme myös antaa sarakkeelle leveyden, kuten kiinteän leveyden tai taipuman tai taipuman ja minimaalisen tai maksimiarvon yhdistelmän. Lisäämme sarakkeen komponentit yrityksen nimeen, tunnukseen, tikkeihin, sektoriin ja teollisuuteen. Tämä luo uuden StocksGrid-luokan ruudukolla alla olevan kuvan mukaisesti


       
       
       
       
       

Sovelluksesi palauttaa StockGridin osana mallinnusta, kuten alla:

vie oletusluokan sovellus laajentaa komponenttia {
   tehdä () {
        palata (
            
                
            
        )
    }
}

Katso tämän vaiheen koodi GitHubissa.

Käynnissäsi näet verkkosovelluksen, jossa tyhjä ruudukko on käynnissä npm

Kantatietojen sitominen ruudukolla

ExtReact-ruudukko on laskentataulukkomainen taulukko, joka vetää ja tuottaa tietoja tietovarastoista. ExtReact-sovelluksessa Store on tietorakenne, jonka avulla voit lajitella ja suodattaa tietoja ruudukossa.

Voimme nyt aloittaa lataamalla varastotiedot ja luomalla myymälän. Ruudukot hakevat tietonsa Kaupasta. Vuorovaikutukset ruudukon kanssa laukaisevat kaupassa tapahtumia, kuten uudelleenlatauksen tai lajittelun tai sivun.

ExtReact-datakaupan käsite on hiukan erilainen kuin Flux-myymälä. Ruudukko ja myymälä eroavat hiukan tavallisesta Reakt-lähestymistavasta siinä, että nämä kaksi ovat tiiviisti integroituneet. Tyypillisesti voit siirtää tietoja suoraan Kauppaan tai Kauppa voi vetää tietoja itsenäisesti taustamäärästä välityspalvelimen avulla. ExtReact-ruudukko tarjoaa interaktiivisia toimintoja, kuten suodattamisen, lajittelun, haun, ryhmittelyn ja yhteenvedon ilman lisäkoodia.

Tässä esimerkissä siirrämme tiedot suoraan myymälään Varastotiedot-tiedostosta. Vaihtoehtoisesti voit luoda myymälän välityspalvelimella - välityspalvelimen avulla voimme tehdä kaikenlaisia ​​hienoja asioita, kuten etähakua, suodatusta ja lajittelua. Asetamme tämän sovelluksen automaattisen latauksen arvoksi tosi, joten se lataa tiedot automaattisesti ruudukkoon. Raakadataa ei ole erityisen lajiteltu millään kriteerillä, joten aiomme lajitella sen asiakaspuolella määrittelemällä nimiominaisuuden.

this.store =
       uusi Ext.data.Store ({
            tiedot: varastot,
            autoLoad: totta,
            lajittelijat: [{
                omaisuus: 'nimi'
            }],
            kuuntelijat: {
                päivitys: this.onRecordUpdated
            }
})

Määritä ruudukossa myymälän kokoonpano luomallemme myymälölle.

       ...

Nyt käynnissä npm start. Sovelluksessamme on ruudukko, jossa on kaikki tiedot alla esitetyllä tavalla:

Perustietojen ruudukko

Tämän yksinkertaisen React-koodin avulla saat paljon ominaisuuksia ilmaiseksi. Näihin ominaisuuksiin kuuluu lajittelu, jonka avulla voit napsauttaa mitä tahansa sarakkeen otsikkoa, ja se lajittelee automaattisesti asiakaspuolella. Jos otimme käyttöön todellisen tausta-sovellusliittymän, voimme määrittää Store-välityspalvelimen suorittamaan etälajittelua taustalla ja käyttämään tietokannan tilaamislauseketta lajitteluun. ExtReact Grid tarjoaa myös koon mukaisia ​​sarakkeita ilmaiseksi. Joten käyttäjä voi vetää saraketta sivulta toiselle.

ExtReact Grid tarjoaa myös mukavan ryhmittelyominaisuuden. Sovelluksesi käyttäjä voi ryhmitellä toimialoittain, ja sovellus ryhmittelee kaikki tiedot toimialan mukaan. ExtReact-ruudukko antaa kiinnitetyn otsikon, kun vierität alas jokaiselle ryhmälle.

Ryhmittely toimialoittain

Suorittaessasi sovellusta huomaat, että nämä tiedot tuottavat melko nopeasti 10 000 tietuetta. Syy, jonka se näyttää niin nopeasti, johtuu siitä, että se käyttää sitä, jota kutsumme puskuroituksi renderointiin. Puskuroidulla renderoinnilla Grid näyttää alkuperäisen lataamisen yhteydessä tietoja, jotka ovat hiukan enemmän kuin mitä todellisuudessa näet "view port korkeuden" suhteen. Kun vierität alas, se korvaa Grid-solujen sisällön tosiasiallisemmilla tietueilla. kun sivut alas kaupassa. Joten ruudukko tosiasiallisesti suojaa DOM-elementtejä mahdollisimman paljon. Pitämällä DOM pienenä, pitää muistin kulutuksen pienenä ja varmistaa sovelluksen korkean suorituskyvyn.

Katso tämän vaiheen koodi GitHubissa.

Varastotillan tyylisuunnittelu

Haluat muotoilla ruudukkoa, jotta tietoja on helpompi analysoida.

Grid Cell -prop

Katsotaanpa ruudukkosolujen muotoilun hallintaa. Haluamme tehdä nimestä lihavoidun - paras tapa tehdä se on käyttämällä solupoppaattia. Ruudukkosolu ottaa useita määrityksiä, jotka hallitsevat solun ulkonäköä. Heitämme tyylikokoonpanon sinne, ja sitten sanotaan, että fontWeight on yhtä lihavoitu.

cell = {{style: {fontWeight: 'lihavoitu'}}}

Painikkeen lisääminen riviin

Oletetaan nyt, että haluamme painikkeen, jota napsauttamalla voimme ostaa yhden näistä osakkeista. Tätä varten voimme lisätä sarakkeen painikkeella. Tällä kertaa emme aio lisätä tietohakemistoa, koska se ei vastaa kaupan kenttää. Aiomme lisätä WidgetCell-painikkeen. Suoritamme tyyliä - aiomme laittaa siihen toimintakierroksen käyttöliittymän, joten painikkeella on pyöreä toiminta seuraavalla tavalla:


    
        

Käytettävä ostoministeri on hyvin yksinkertainen. Kun napsautat osta-painiketta, näytämme vain pienen viestin, joka kertoo ostamasi osakkeen symbolin. Kun napsautat sitä, se kutsuu tätä toimintoa:

buyHandler = (painike) => {
      anna gridrow = button.up ('gridrow'),
      tietue = gridrow.getRecord ();
      Ext.toast (`Osta $ {record.get ('nimi')}))
}
Lisäyspainike ruudukossa

Kuten tästä esimerkistä voi nähdä, voit periaatteessa upottaa minkä tahansa ExtReact-komponentin ExtReact-ruudukon soluun, ja se on täysin vuorovaikutteinen.

Katso tämän vaiheen koodi GitHubissa

Trends Sparkline -diagrammin lisääminen osakekantaan

Varastotiedoissa meillä on joukko punkkeja viidestä viimeisestä osakekaupasta. Upottakaamme se Sparkline-taulukkoon ruudukon sisällä. Aiomme jälleen käyttää Widgetcelliä ExtReact-komponentin tuottamiseen ruudukkosolun sisällä.

Kun suoritat sovellusta npm-käynnistyksellä, siirrä hiirellä hiiren osoittimen kohdalla eri pisteisiin, se näyttää Y-arvon, joka on muotoiltu kahdella desimaalilla.

Trendikaavio ruudukossa

Katso tämän vaiheen koodi GitHubissa.

Varastotietojen vieminen Exceliin

Kuten kaikki dataintensiiviset sovellukset, haluamme kyvyn viedä tiedot Exceliin. Jotta voimme lisätä tämän ominaisuuden, lisäämme gridexporterin ruudukkoon liitettävien plugins-lisäosien suuntaan kuvan mukaisesti:

Lisäämme vielä muutama komponentti sovellukseen, jotta vientitoimintojen soittaminen on helppoa. Lisäämme otsikkopalkin ja telakan otsikkopalkin ruudukon yläosaan ja laitamme valikon sisälle. Kun napsautat "vie" -painiketta, sinulla on mahdollisuus viedä joko Excel- tai CSV-tiedostoon.


           

Viennin käsittelijä kuljettaa vientityypin ja tiedostonimen laajennuksen kuvan osoittamalla tavalla:

vienti = (tyyppi) => {
           this.grid.cmp.saveDocumentAs (
           {tyyppi, otsikko: 'Varastot'});
}

Viejä on läpäistävä paketti.json-riippuvuussuhteissa kuvan mukaisesti:

"@ sencha / ext-viejä": "~ 6.6.0"

Sinun on asennettava riippuvuus npm-asennuksella ja sitten npm alkaa ajaa sovellusta.

Verkotietojen vienti

Viejä-laajennus mahdollistaa tietojen viennin erilaisiin tiedostomuotoihin. Se tukee alkuperäisiä XSLX-, Excel XML -muotoja sekä HTML- ja CSV / TSV-muotoja (pilku / välilehti erotettu arvo).

Katso tämän vaiheen koodi GitHubissa.

Muokkausominaisuuden lisääminen varastojen ruudukkoon

Laskentataulukko vaatii kyvyn muokata tietoja. Tämän ominaisuuden lisäämiseksi meidän on lisättävä toinen Grid-laajennus, nimeltään gridcellediting. Lisäämällä tämä laajennus ja merkitsemällä sarakkeet muokattaviksi, sinulla on nyt laskentataulukko, jota voi muokata kaksoisnapsauttamalla mitä tahansa ruudukkosolua. Voit jatkaa ruudukon muokkaamista napsauttamalla ruudukon solujen läpi.

Lisää ruudukkosolujen editointilaajennus ruudukkojen muotoilulla: totta ja “Nimen” muokkaaminen Ruudukko-sarakkeessa kuvan osoittamalla tavalla:

Kun suoritat sovellustasi npm start -näytöllä, voit nyt muokata ruudukkosoluja.

Muokkaa kykyä ruudukossa

Muokkaa tapahtumia

Ruudukkosolun muokkaamisen jälkeen sinun on kuunneltava kyseistä tapahtumaa myymälässä tietojen muutosten varalta. Voit tehdä sen lisäämällä kuuntelijakonfiguraation ja kuuntelijan ”päivitystapahtumaan”. Päivitystapahtuma välittää joukon parametreja, mukaan lukien tallennus, päivitetty tietue, tapahtumaa kuvaavan objektin, ja läpäisee sitten joukon muutettuja kenttien nimiä. Lisäät sen hoitajaan.

Tässä sovelluksessa näytetään vain paahtoleipäviesti. Reaalimaailman sovelluksessa itse asiassa sovellettaisiin liiketoimintalogiikkaa, kuten jatkuvaa muutosta tietokantaan.

...
kuuntelijat: {
            päivitys: this.onRecordUpdated
 }
...
onRecordUpdated = (tallenna, tallenna, käytä, ModifiedFieldNames) => {
      const-kenttä = muokattuFieldNames [0];
      Ext.toast ( '$ {record.get (nimi)}
                 $ {kenttä} päivitetty muotoon $ {record.get (kenttä)} `)
 }

Valitun vaihtoehdon lisääminen ruudukkosoluun

Jos haluat lisätä “Valitse” -vaihtoehdon ruudukkosoluun, voit tehdä sen käyttämällä toista ExtReact-komponenttia, nimeltään SelectField. Lisäät vain SelectField ExtReact -komponentin vaadittuun sarakkeeseen.


         

Kun suoritat sovelluksesi npm-käynnistyksellä, näet nyt valitut vaihtoehdot kuvan osoittamalla tavalla:

Valintavaihtoehdon lisääminen ruudukkoon

Katso tämän vaiheen koodi GitHubissa.

Varastotaulukon optimointi mobiilikokemusta varten

Tämä sovellus toimii hyvin työpöydällä, mutta haluat ehkä tarjota optimoidun käyttökokemuksen, kun käytät samaa sovellusta matkapuhelimen selaimessa. Tämän sovelluksen kohdalla solujen muokkaaminen ei ehkä ole paras tapa pienten matkapuhelimien muokkaamiseen. Pieninäyttöisissä laitteissa kannattaa ehkä valita erilainen muokkaustyyli.

ExtReact platformconfig -asetuksen avulla voit määrittää käyttäytymisen työpöydälle tai mobiililaitteille. Voit asettaa minkä tahansa prop-arvon eri arvoon platformConfig: n perusteella, ja tässä me määritämme laajennuksen alustaan ​​perustuen. Tässä esimerkissä käytämme ruudukkonäyttöä, kun sovellus on työpöydällä. Kun sovellus on mobiililaitteessa, käytämme grideditablea, joka tarjoaa paremman tavan muokata mobiililaitteiden tietoja kuvan osoittamalla tavalla:

platformConfig = {{
                työpöytä: {
                        laajennukset: {
                            gridexporter: totta,
                            ruudukonpoisto: totta
                        }
                },
                '! työpöytä': {
                        laajennukset: {
                            gridexporter: totta,
                            grideditable: totta
                        }
                }
}}

Kun suoritat sovelluksesi npm-käynnistyksellä, näet nyt mobiilinäkymän kuvan osoittamalla tavalla:

Varastoi sovelluksen mobiililaitteella

Katso tämän vaiheen koodi GitHubissa.

Yhteenveto

Tämä Stocks-laskentataulukkosovellus osoittaa, kuinka helppoa on luoda taulukkolaskentainen käyttöliittymä helposti tietopohjaiseen verkkosovellukseen React 16: n ja Sencha ExtReactin avulla. Voit tarkastella suoritettua käynnissä olevaa sovellusta Sencha Fiddle -sovelluksessa.