Kuidas luua React 16 abil vinge varude arvutustabel

React 16 on Reacti esimene versioon, mis on üles ehitatud Reacti uue tuumarhitektuuri pealkirjaga “Fiber”. React 16 on loodud maapinnast asünkroonse renderdamise toetamiseks. See võimaldab töödelda suuri komponentide puid, ilma et see blokeeriks peamist täitmisniiti.

React 16 on populaarne, kuna see toetab mitmeid peamisi funktsioone, näiteks erandite püüdmine tõrkepiiride abil, mitme komponendi tagastamine renderdusest, vähendatud failisuurus ja MIT-litsentsi tugi.

Andmepõhise veebirakenduse nagu Varude arvutustabel ehitamiseks vajate oma kasutajate andmete kuvamiseks arvutustabelilaadset liidest.

Varude arvutustabel

Teie kasutajad eeldavad, et teie rakenduse arvutustabel suudab:

  • Fikseeritud päisega kerimine
  • Sorteerimiseks klõpsake veeru päisel
  • Konkreetsete veergude kuvamine ja peitmine
  • Leheotsimine, rühmitamine ja kokkuvõte
  • Andmete redigeerimine lahtrites
  • Eksportimine Excelisse
  • Puurimine allapoole / rea laiendamine

Kuid arvutustabel või ruudustik võib olla üks kõige keerulisemaid ja keerulisemaid kasutajaliidese komponente, mida Reaktisse ehitada. Selle põhjuseks on asjaolu, et paljud vajalikud funktsioonid nõuavad nii Reacti olulist asjatundlikkust kui ka valmisolekut ja võimet DOM-i kaevata.

Kui soovite ruutvõrku kodeerida HTML-tabeli või mõne muu kolmanda osapoole komponendi abil, peate rakendama mitmeid ühiseid funktsioone. Nende funktsioonide hulka kuulub ruudustiku veerupäisel klõpsamine, et sorteerida veeru päise vahel jaguril klõpsamine, või piipari libistamine ja järgmise andmelehe tõmbamine.

Selle rakenduse kiireks ülesehitamiseks kasutame Sencha komponente ExtReact. Sencha’s ExtReact on vähemalt 115-st eelkonfigureeritud kasutajaliidese komponendist koosnev komponentide komplekt, mida saate hõlpsalt integreerida React 16 rakendustega. ExtReacti üks võtmekomponente on Grid. See pakub arvutustabelilaadset funktsiooni, mis on vajalik varude arvutustabelirakenduse kiireks ehitamiseks. Me kasutame ExtReact Grid, et näidata teavet aktsiate ja aktsiatega seotud ettevõtete kohta.

Alustame varude rakenduse loomisega, kasutades Sencha ExtReact Grid.

Tellingute varude arvutustabel

Rakenduste tellingute loomiseks toimige järgmiselt.

  • Veenduge, et teil oleks sõlmekeskkond seadistatud

Esiteks veenduge, et teie süsteemis oleks seadistatud Node 8.11+ ja NPM 6+. Node uusima versiooni saate alla laadida Node veebisaidilt. Kui olete juba sõlme installinud, saate sõlme ja npm versioone hõlpsalt kontrollida järgmiste käskude abil: sõlm -v ja npm -v

  • Hankige oma sisselogimismandaadid ExtReact NPM repo jaoks

ExtReact NPM-i pakette hostitakse Sencha privaatses NPM-i repos. Kõigile ExtReacti pakettidele juurdepääsu saamiseks logite sellesse reposse sisse üks kord. Sisselogimismandaadi saamiseks minge lehele ExtReact 30-Day Free Trial ja täitke vorm. Saadame teile meilisõnumi sisselogimisandmetega ja linkidega ressurssidele, näiteks dokumendid ja näidisprojektid.

  • Logige sisse ExtReact NPM repole ja hankige rakenduste generaator

Järgmine samm on sisselogimine Sencha privaatsesse npm reposse, mis majutab ExtReact pakette. Kasutage oma npm sisselogimist (saadaval ExtReacti proovimeilis), et seostada npm repo @sencha ulatusega ja sisestage volitatud andmed, kui seda küsitakse:

npm sisselogimine - register = http: //npm.sencha.com - ulatus = @ sencha

Järgmine samm on ExtReact generaatori paketi installimine.

npm install -g @ sencha / ext-react-gen
  • Looge oma esimene React App

Oma esimese ExtReacti rakenduse loomiseks käivitage rakenduse ExtReact generaator:

ext-reageerige-gen app teie-app-nimi-siin -i

Rakendusegeneraator küsib teilt mõned küsimused - näiteks rakenduse nimi. Vaikimisi kasutab rakendus materjali teemat (põhineb Google'i materjalide kujundamise juhistel) ja see on hea valik lähteteemana.

Valige ühes viipas „Genereeri tühi rakendus”. Generaator palub teil ka oma projekti jaoks uue kataloogi luua. Seejärel laadib generaator alla ja loob teie näidisrakenduse koos asjakohaste sõltuvustega.

  • Käivitage oma React App

Generaatori väljundis leiate rakenduse käitamiseks vajalikud sammud. Muutke oma uut rakenduste kataloogi ja käivitage rakendus, kasutades järgmist:

npm algus

See käivitab rakenduse ja teie tühi rakendus React kuvatakse lihtsalt koos rakenduse pealkirjaga. Rakenduse põhikomponendil (nt StocksGrid) on juur üks konteiner. See on tähistatud täisekraanina, paigutus on seadistatud sobivaks, mis tähendab, et see venitab oma lapse seda täitma.

Vaadake selle toimingu koodi GitHubis.

Varude ruudustiku lisamine rakendusele

Lisage aktsiate andmed

Lisame rakendusele 10 000 rea andmestiku, mida nimetatakse aktsiateks.json. Iga andmerida sisaldab ettevõtte nime, linnukese sümbolit, sektorit ja tegevusharusid, milles nad asuvad. Reas on ka rida puuke, mis on selle aktsia viimased viis müüki.

Need on andmed, mida me oma võrgus kuvame. Selles õpetuses laadime andmeid staatiliselt stock.jsonist, kuid samade andmete saamiseks saate ka ehitada taustarajapidamise API-liidesed.

Põhivõrgu loomine

StockGrid Reakti komponendi renderdusmeetodi korral tagastame veergudega ruudustiku.

Veergude lisamiseks meie ruudustikku kasutatakse veerukomponenti. Veerukomponent võtab andmeindeksi, mis on sama kui varude andmete nimeväli. Veerg võtab teksti rekvisiidi, mis on veeru päise tekst. Samuti võime veerule anda laiuse, näiteks kindla laiuse või painde või paindliku ja minimaalse või maksimaalse kombinatsiooni. Lisame veerukomponendid ettevõtte nime, sümboli, puukide, sektori ja tööstuse jaoks. Nii luuakse Gridiga uus StocksGrid-klass, nagu allpool näidatud


       
       
       
       
       

Teie rakendus tagastab StockGrid osana renderdusest järgmiselt:

eksport vaikeklassi rakendus laiendab komponenti {
   renderdama () {
        tagasi (
            
                
            
        )
    }
}

Vaadake selle toimingu koodi GitHubis.

Käitamisel näete npm käivitamisel tühja ruudustikuga veebirakendust

Laoandmete sidumine võrguga

ExtReact-ruudustik on arvutustabelilaadne tabel, mis tõmbab sisse ja rendab andmed andmehoidlast. Rakenduses ExtReact on pood andmestruktuur, mis võimaldab teil ruudustikus andmeid sortida ja filtreerida.

Nüüd saame alustada varude andmete laadimisega ja poe loomisega. Võrgustikud haaravad oma andmed poest. Võrgustikuga interaktsioonid käivitavad poes sündmused, nagu uuesti laadimine või sortimine või otsing.

ExtReacti andmepoe kontseptsioon on natuke erinev Flux Store'ist. Võrgustik ja pood eristuvad tavapärasest Reaketi lähenemisest pisut selles, et need kaks on tihedalt integreeritud. Tavaliselt saate andmeid edastada otse poodi või võib pood puhverserveri abil koguda andmeid taustast. ExtReact Grid pakub interaktiivseid funktsioone, nagu filtreerimine, sortimine, otsing, rühmitamine ja kokkuvõte ilma täiendava koodita.

Selle näite puhul edastame andmed varude andmefailist otse poodi. Teise võimalusena saate poe luua puhverserveri konfiguratsiooniga - puhverserveri omamine võimaldab meil teha kõikvõimalikke suurepäraseid asju, nagu kaugotsing, filtreerimine ja sortimine. Selle rakenduse jaoks seadsime automaatse laadimise väärtuseks tõene, nii et see laadib andmed automaatselt võrku. Algandmeid ei sordita eriti ühegi kriteeriumi järgi, seega hakkame neid sorteerima kliendi poolel, täpsustades nime atribuudi.

this.store =
       uus Ext.data.Store ({
            andmed: varud,
            autoLoad: tõsi,
            sorteerijad: [{
                kinnistu nimi'
            }],
            kuulajad: {
                värskendus: this.onRecordUpdate
            }
})

Määrake ruudustikus poe konfiguratsioon meie loodud poodile.

       ...

Nüüd töötab npm start, meie rakendusel on ruut kõigi andmetega, nagu allpool näidatud:

Põhivõrk andmetega

Selle lihtsa React-koodi abil saate tasuta palju funktsioone. Nende funktsioonide hulka kuulub sortimine, mis võimaldab teil klõpsata mis tahes veeru päisel ja see sorteerib automaatselt kliendi poolel. Kui me rakendaksime tõelise tagavararakendusliidese API, saaksime poe puhverserveri konfigureerida nii, et see teeks serveris kaugsorteerimise ja kasutaks sorteerimiseks andmebaasis klauslit “tellimine”. ExtReact Grid pakub tasuta ka muudetavaid veerge. Nii saab kasutaja veeru vedada küljelt küljele.

ExtReact Grid pakub ka kena grupeerimise funktsiooni. Teie rakenduse kasutaja saab grupeerida majandusharude kaupa ja rakendus grupeerib kõik andmed majandusharude kaupa. ExtReact Grid annab iga rühmituse allapoole kerimisel kinnitatud päise.

Rühmitamine majandusharude kaupa

Rakenduse käitamisel märkate, et need andmed muutuvad 10 000 kirje jaoks üsna kiiresti. Põhjus, miks see nii kiiresti kuvatakse, on see, et see kasutab seda, mida me nimetame puhverdatud renderdamiseks. Puhverdatud renderdamise korral pakub Grid esmasel laadimisel andmeid, mis on natuke rohkem kui need, mida te tegelikult vaatamispordi kõrguse korral näete. Allapoole kerimisel asendab see Gridi lahtrite sisu tegelikult uuemate kirjetega. kui poes lehele alla lähete. Nii et Grid kaitseb tegelikult DOM-i elemente nii palju kui võimalik. Kui hoiate DOM-i väiksena, hoiab see mälukasutust väikese ja tagab rakenduse kõrge jõudluse.

Vaadake selle toimingu koodi GitHubis.

Varude ruudustiku kujundamine

Soovite ruutvõrgustiku stiilida, et andmeid oleks lihtsam analüüsida.

Võrguraku tugiteenuse kasutamine

Vaatame ruudukujuliste stiilide juhtimist. Tahame nime julgeks muuta - parim viis selleks on lahtriprofiili kasutamine. Ruudustikulahtril on mitu konfiguratsiooni, mis kontrollib lahtri väljanägemist. Viskame sinna stiilikonfiguratsiooni ja siis ütleme, et fontWeight võrdub paksus kirjas.

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

Nupu lisamine reas

Ütleme nüüd, et me tahame nuppu, millele saaksime klõpsata, et ühte neist aktsiatest osta. Selleks saame lisada nupuga veeru. Seekord ei hakka me andmeindeksit lisama, kuna see ei vasta ühelegi poe väljale. Lisame nupuga vidinakella. Teeme mõne stiili - paneme selle ümber kasutajaliidese, nii et nupul on ümar toiming nagu allpool:


    
        

Ostukäitleja, mida me kasutama hakkame, on väga lihtne. Kui klõpsate ostunupul, kuvame lihtsalt väikese sõnumi, millel on kirjas teie ostetava aktsia sümbol. Sellel klõpsamisel helistatakse sellele funktsioonile:

buyHandler = (nupp) => {
      las gridrow = button.up ('ruudustik'),
      kirje = gridrow.getRecord ();
      Ext.toast (`Osta $ {record.get ('nimi')})
}
Nupu lisamine ruudustikku

Nagu sellest näitest näete, saate põhimõtteliselt manustada iga ExtReact-komponendi ExtReact Grid-lahtrisse ja see on täielikult interaktiivne.

Vaadake selle toimingu koodi GitHubis

Trends Sparkline Diagrammi lisamine Stocks Grid

Varude andmetes on meil massiiv puuke viimase viie aktsia müügi kohta. Manustame selle Sparkline'i diagrammina ruudustikku. Jällegi hakkame Widgetcelli kasutama ExtReacti komponendi renderdamiseks ruudukujulises ruumis.

Kui käivitate rakenduse npm-i käivitumisega, hõljutage hiirekursorit sädemekaardi erinevate punktide kohal, kuvatakse Y-väärtus, mis on vormindatud kahe kümnendkoha täpsusega.

Suundumuste diagramm ruudustikus

Vaadake selle toimingu koodi GitHubis.

Varude andmete eksportimine Excelisse

Nagu kõigi andmemahukate rakenduste puhul, tahame ka võimalust andmeid Excelisse eksportida. Selle võime lisamiseks lisame gridexporteri võrgus olevate pistikprogrammide jaoks järgmiselt:

Lisame rakendusele veel mõned komponendid, et ekspordifunktsioonide helistamine oleks hõlbus. Lisame ruudustiku ülaossa tiitliriba ja doki tiitliriba ning paneme menüü sinna sisse. Kui klõpsate nuppu eksporti, saate eksportida kas Excelisse või CSV-sse.


           

Ekspordi käitleja läbib eksportimise tüübi ja failinime laiendi, nagu näidatud:

eksport = (tüüp) => {
           this.grid.cmp.saveDocumentAs (
           {tüüp, pealkiri: 'Varud'});
}

Peate eksportija läbima sõltuvustest pack.json järgmiselt:

"@ sencha / väliseksportija": "~ 6.6.0"

Peate installima sõltuvuse npm installimisega ja seejärel npm hakkab rakendust käitama.

Võrguandmete eksportimine

Ekspordi plugin võimaldab andmete eksportimist erinevatesse failivormingutesse. See toetab nii loomulikke XSLX, Excel XML kui ka HTML ja CSV / TSV (komade / vahekaartidega eraldatud väärtus) vorminguid.

Vaadake selle toimingu koodi GitHubis.

Varude ruudustiku redigeerimisvõime lisamine

Arvutustabel nõuab andmete redigeerimise võimalust. Selle võimaluse lisamiseks peame lisama veel ühe Gridi pistikprogrammi, mida nimetatakse gridtselliitimiseks. Selle pistikprogrammi lisamisega ja veergude redigeeritavaks märkimisega on teil nüüd arvutustabel, mida saab redigeerida, topeltklõpsates suvalist ruudustiku lahtrit. Võrgu redigeerimist saate jätkata, sirvides ruudustiku ruute.

Lisage ruudustiku lahtri redigeerimise pistikprogramm koos ruudustiku eraldamisega: true ja muutke veerus Grid ruudu Grid all nimi “Name”:

Kui käivitate rakenduse npm käivitusega, saate nüüd redigeerida ruudukujulisi ruute.

Redigeerimise võime ruudustikus

Sündmuste redigeerimise käitlemine

Pärast ruudukujulise lahtri redigeerimist peate andmete muutuste jaoks seda sündmust poes kuulama. Selleks lisate kuulaja konfiguratsiooni ja kuulaja värskendussündmuse jaoks. Värskendussündmus läbib mitmeid parameetreid, sealhulgas salvestus, värskendatud kirje, objekt, mis kirjeldab toimunut, ja seejärel edastab muudetud väljade nimede massiivi. Lisate selle käitlejas.

Selles rakenduses kuvame lihtsalt röstsaia sõnumit. Reaalse maailma rakenduses rakendaksite tegelikult äriloogikat, näiteks püsivaid muudatusi andmebaasis.

...
kuulajad: {
            värskendus: this.onRecordUpdate
 }
...
onRecordUpdated = (salvestage, salvestage, töötage, modifitseeritudFieldNames) => {
      const väli = muudetudFieldNames [0];
      Äärmagus (`$ {record.get ('nimi')}
                 $ {väli} värskendatud väärtuseks $ {record.get (väli)} `)
 }

Valikuvõimaluse lisamine ruudustikule

Kui soovite ruudustiku lahtrisse lisada valiku „Vali“, saate seda teha teise ExtReacti komponendi nimega SelectField abil. Lisasite lihtsalt komponendi SelectField ExtReact vajalikku veergu.


         

Kui käivitate rakenduse npm käivitusega, näete nüüd järgmisi valikuid:

Valiku lisamine ruudustikku

Vaadake selle toimingu koodi GitHubis.

Varude arvutustabeli optimeerimine mobiilikogemuse jaoks

See rakendus sobib hästi töölauakogemuse jaoks, kuid võiksite pakkuda optimeeritud kogemust, kui kasutate sama rakendust mobiiltelefoni brauseris. Selle rakenduse puhul ei pruugi kärje redigeerimine olla mobiiltelefonide väikese ekraaniga redigeerimise jaoks parim kogemus. Väikese ekraaniga seadmete puhul võiksite valida mõne muu redigeerimisstiili.

Suvand ExtReact platformconfig võimaldab teil määrata töölaua või mobiilseadme käitumise. Võite suvalise rekvisiidi väärtuseks teistsuguse väärtuse määrata, tuginedes platformConfig ja siin seadistame pistikprogrammi platvormi põhjal. Selles näites kasutame ruudustiku eemaldamist, kui rakendus on töölaual. Kui rakendus on mobiilis, kasutame jagatavat, mis pakub paremat viisi mobiilseadmete andmete redigeerimiseks, nagu näidatud:

platformConfig = {{
                töölaud: {
                        pistikprogrammid: {
                            gridexporter: tõsi,
                            ruudustiku eemaldamine: tõsi
                        }
                },
                '! töölaud': {
                        pistikprogrammid: {
                            gridexporter: tõsi,
                            jagatud: tõsi
                        }
                }
}}

Kui käivitate rakenduse npm käivitusega, näete nüüd mobiilivaadet järgmiselt:

Varutab mobiilsideseadme rakenduse

Vaadake selle toimingu koodi GitHubis.

Kokkuvõte

See Stoksi arvutustabeli rakendus näitab, kui lihtne on arvutustabelilaadset liidest hõlpsalt oma andmepõhises veebirakenduses luua, kasutades React 16 ja Sencha ExtReact. Valminud jooksvat rakendust saate vaadata Sencha Fiddle'is.