React 16 istifadə edərək səhmlərin əla cədvəlini necə etmək olar

React 16, React’in “Fiber” kod adlı React’un yeni əsas arxitekturasına əsaslanan React’in ilk versiyasıdır. React 16 asinxron göstərməni dəstəkləmək üçün yerdən tərtib edilmişdir. Bu, böyük komponent ağaclarının əsas icra ipliyini bloklamadan işlənməsinə imkan verir.

React 16 məşhurdur, çünki bir sıra əsas funksiyaları dəstəkləyir: Xəta sərhədlərindən istifadə edərək istisnaların alınması, göstərilmədən birdən çox komponentin qaytarılması, fayl həcminin azaldılması və MIT lisenziyasının dəstəklənməsi kimi.

Səhmlər cədvəli kimi məlumatlara əsaslanan veb tətbiqetmə yaratmaq üçün məlumatlarınızı istifadəçilərinizə göstərmək üçün masa kimi bir interfeysə ehtiyacınız var.

Səhmlər cədvəli

İstifadəçiləriniz tətbiqinizdəki cədvəlin:

  • Sabit başlıqla gedin
  • Bir sütun başlığını tıklayaraq sırala
  • Müəyyən sütunları göstərin və gizlədin
  • Sürüşdürün, qruplaşdırın və ümumiləşdirin
  • Xanalardakı məlumatları düzəldin
  • Excel-ə ixrac edin
  • Satır genişləndirilməsi / aşağı genişləndirilməsi

Bununla birlikdə, bir masa və ya bir cədvəl React-da qurulması ən çətin və mürəkkəb UI komponentlərindən biri ola bilər. Tələb olunan funksiyaların əksəriyyəti həm əhəmiyyətli Reaktiv biliklər, həm də DOM-a daxil olmaq istəyi və bacarığı tələb etməsidir.

Bir HTML cədvəlini və ya digər üçüncü tərəf komponentini istifadə edərək bir şəbəkəni kodlaşdırmaq istəyirsinizsə, bir neçə ümumi funksiyanı yerinə yetirməlisiniz. Bu funksiyalar sıralamaq üçün bir ızgara sütunu başlığına basmaq, ölçüsünü dəyişdirmək üçün bir sütun başlığı arasında bir ayırıcıya vurmaq və ya bir çağrı cihazını sürüşdürmək və məlumatların növbəti səhifəsinə keçməkdir.

Bu proqramı tez bir zamanda yaratmaq üçün Sencha'nın ExtReact komponentlərindən istifadə edəcəyik. Senchas ExtReact, React 16 tətbiqetmələrinə asanlıqla inteqrasiya edə biləcəyiniz 115-dən çox əvvəlcədən hazırlanmış UI komponentinin bir hissəsidir. ExtReact-un əsas komponentlərindən biri də şəbəkədir. Səhm elektron tablo tətbiqetməsini tez bir zamanda qurmaq üçün lazım olan elektron cədvələ bənzər bir funksionallıq təklif edir. Dövlət və dövlət şirkətləri haqqında məlumatları göstərmək üçün ExtReact Grid istifadə edəcəyik.

Sencha's ExtReact Grid istifadə edərək bir stok tətbiqi qurmağa başlayaq.

İskele Səhmlər Cədvəl Tətbiqi

Bir tətbiq çərçivəsi yaratmaq üçün aşağıdakı addımları tamamlayın:

  • Bir qovşaq mühiti qurduğunuzdan əmin olun

Əvvəlcə sisteminizdə Node 8.11+ və NPM 6+ qurulduğundan əmin olun. Düyünün son versiyasını Düyün veb saytından yükləyə bilərsiniz. Əgər əvvəllər Node quraşdırılmışsa, aşağıdakı əmrlərlə Node və npm versiyalarını asanlıqla yoxlaya bilərsiniz: node -v və npm -v

  • ExtReact NPM repo üçün giriş etimadnamənizi alın

ExtReact NPM paketləri Sencha'nın xüsusi NPM reposunda yerləşdirilir. Bütün ExtReact paketlərinə giriş əldə etmək üçün bu repoya bir dəfə daxil olursunuz. Etibarnamə əldə etmək üçün ExtReact 30 günlük sınaq səhifəsinə daxil olun və formanı doldurun. Giriş məlumatları və sənədlər və nümunə layihələr kimi mənbələrə bəzi keçidləri olan bir e-poçt göndərəcəyik.

  • ExtReact NPM reposuna daxil olun və tətbiqetmə generatorunu əldə edin

Növbəti addım, ExtReact paketlərinə ev sahibliyi edən Sencha'nın xüsusi npm reposuna daxil olmaqdır. Npm reposunu @sencha sahəsinə bağlamaq və istənildikdə giriş məlumatlarını daxil etmək üçün npm girişinizi (ExtReact test e-poçtunda verilmişdir) istifadə edin:

npm giriş - qeyd defteri = http: //npm.sencha.com - əhatəsi = @ sencha

Növbəti addım ExtReact generator paketini quraşdırmaqdır.

npm quraşdırma -g @ sencha / ext-react-gen
  • İlk reaktiv tətbiqinizi yaradın

İlk ExtReact tətbiqatınızı yaratmaq üçün ExtReact tətbiqetmə generatorunu çalıştırın:

ext-reaksiya-gen tətbiqi-tətbiq-adınız-burada

Tətbiq generatoru sizə bir neçə sual verir, məsələn: B. tətbiqinizin adı. Varsayılan olaraq, tətbiq material dizaynından istifadə edir (Google-un maddi dizayn qaydalarına əsasən) və başlanğıc dizaynı olaraq yaxşı bir seçimdir.

İstədiyiniz hər hansı birindən Boş Tətbiq Yarat seçin. Jeneratör ayrıca layihəniz üçün yeni bir qovluq yaratmağınızı xahiş edəcəkdir. Bundan sonra generator müvafiq asılılıqlar daxil olmaqla nümunə tətbiqinizi yükləyir və qurur.

  • React tətbiqetmənizi işə salın

Tətbiqinizi işə salmaq üçün addımlar üçün generator çıxışına baxın. Yeni tətbiq qovluğuna keçin və tətbiqi işə salın:

npm başlanğıc

Bu tətbiqetməni işə salacaq və boş Reakt tətbiqiniz yalnız tətbiqin adı ilə görünəcək. Tətbiqdəki əsas komponentin (məsələn StocksGrid) kök qovluğunda bir konteyner var. Bu tam ekran olaraq qeyd olunur, düzən uyğunlaşdırılır, yəni uşağını doldurmaq üçün uzanır.

Bu addıma qədər olan kodu GitHub-da tapa bilərsiniz.

Tətbiqə Səhmlər Şəbəkəsi əlavə olunur

Envanter məlumatlarını əlavə edin

Tətbiqə stocks.json adlı 10.000 sıra nümunə qeydini əlavə edəcəyik. Hər bir məlumat sətirində şirkətin adı, ticker simvolu, yerləşdiyi sahə və sahələr yer alır. Satırda eyni hissənin son 5 satışını təmsil edən bir sıra gənələr var.

Bu, şəbəkəmizdə göstəriləcək məlumatlardır. Bu təlimat məlumatları stocks.json-dan statik olaraq yükləyir. Bununla birlikdə, eyni məlumatları əldə etmək üçün bir arxa REST API yarada bilərsiniz.

Əsas şəbəkə yaradın

StockGrid React komponentində, göstərmə metodunda sütunları olan bir grid qaytarırıq.

Şəbəkəmizə sütunlar əlavə etmək üçün bir sütun komponenti istifadə edəcəyik. Sütun komponenti, inventar məlumatlarının ad sahəsi ilə eyni olan bir məlumat indeksindən istifadə edir. Sütunda sütun mətni olan bir mətn dayağı var. Kimi sütuna genişlik də verə bilərik B. sabit genişlik və ya əyilmə və ya əyilmə ilə minimum və ya maksimum birləşməsi. Şirkət adı, simvolu, onay işarəsi, sektor və sektor üçün sütun komponentləri əlavə edirik. Bu, Grid ilə yeni bir StocksGrid sinfi yaradacaq (aşağıya bax)


       
       
       
       
       

Tətbiqiniz göstərilən hissə olaraq StockGrid-i aşağıdakı kimi qaytaracaq:

Standart sinif tətbiqinin genişləndirilmiş komponentini ixrac edin {
render () {return ( )}}

Bu addıma qədər olan kodu GitHub-da tapa bilərsiniz.

İşləyərkən npm işə salındıqda boş bir ızgara olan bir veb tətbiq göstərilir

Envanter məlumatlarının şəbəkə ilə bağlanması

ExtReact raster, məlumat anbarından məlumatları götürən və göstərən bir cədvələ bənzər bir cədvəldir. ExtReact-da Mağaza, bir şəbəkədəki məlumatları çeşidləmək və süzmək üçün istifadə edə biləcəyiniz bir məlumat quruluşudur.

İndi inventar məlumatlarını yükləməyə və bir mağaza yaratmağa başlaya bilərik. Izgaralar məlumatlarını mağazadan alır. Mağazadakı şəbəkə hadisələri ilə əlaqələr, məsələn. B. yenidən yükləmə, çeşidləmə və ya sürüşmə.

ExtReact məlumat deposunun konsepsiyası Flux mağazasından bir az fərqlidir. Şəbəkə və mağazanı standart React yanaşmasından biraz fərqləndirən şey, ikisinin sıx inteqrasiyasıdır. Tipik olaraq, məlumatları birbaşa bir mağazaya ötürə bilərsiniz və ya bir mağaza arxa tərəfdən məlumat almaq üçün bir proxy istifadə edə bilər. ExtReact Grid əlavə kod olmadan filtrləmə, çeşidləmə, sürüşmə, qruplaşdırma və ümumiləşdirmə kimi interaktiv funksiyalar təklif edir.

Bu nümunədə, məlumatları birbaşa inventar məlumat sənədindən mağazaya ötürürük. Alternativ olaraq, bir proxy konfiqurasiyasına sahib bir mağaza yarada bilərsiniz - bir proxy ilə uzaqdan çağrı, filtrləmə və çeşidləmə kimi hər cür böyük işlər görə bilərik. Bu tətbiq üçün avtomatik yükləməni doğru olaraq təyin etdik ki, məlumatlar avtomatik olaraq şəbəkəyə yüklənsin. Xam məlumatlar kriteriyalara görə xüsusi olaraq sıralanmır. Buna görə, ad mülkiyyətini göstərərək müştəri tərəfində sıralanırlar.

this.store = yeni Ext.data.Store ({data: stocks, autoLoad: true, sort:: {property name '}], listen:: update: this.onRecordUpdated}})

Şəbəkədə, iş konfiqurasiyasını yaratdığımız işə təyin edin.

...

İndi npm başlanğıcı işləyir, tətbiqimizin aşağıda göstərildiyi kimi bütün məlumatlarla bir şəbəkəsi var:

Məlumat ilə əsas şəbəkə

Bu sadə React kodu sizə bir çox xüsusiyyətləri pulsuz təqdim edir. Bu xüsusiyyətlərə, hər hansı bir sütun başlığını vurmağa imkan verən və avtomatik olaraq müştəri tərəfində sıralanan çeşidləmə daxildir. Gerçək bir arxa API tətbiq etsəydik, arxa tərəfdən uzaq bir çeşidləmə edə biləcəyi və bir çeşid etmək üçün verilənlər bazasında "sifariş ilə" maddəsini istifadə edə biləcəyimiz mağaza proxy-sini konfiqurasiya edə bilərik. . ExtReact Grid ayrıca pulsuz boyutlandırılabilir sütunlar təqdim edir. Bu, istifadəçinin sütunu bir tərəfdən bir tərəfə sürükləməsinə imkan verir.

ExtReact Grid də gözəl bir qruplaşdırma xüsusiyyətinə malikdir. Tətbiq istifadəçiniz sahələrə görə, qrup isə bütün məlumatları sahələrə görə qruplaşdıra bilər. Qruplaşdırmaların hər biri üçün aşağıya fırlandıqda ExtReact ızgarası sizə sancaqlı bir başlıq göstərəcəkdir.

Sənayelərə görə qruplaşdırma

Tətbiqinizi işə saldığınız zaman bu məlumatların 10.000 qeyd üçün olduqca sürətli göstərildiyini tapa bilərsiniz. Bu qədər sürətli göstərilməsinin səbəbi, buferləşdirilmiş göstərmə kimi tanınan şeydən istifadə etməsidir. Tamponlanmış göstərmə ilə, ilk dəfə ızgara yükləndikdə, görünüş pəncərəsinin hündürlüyündən bir qədər yüksək olan məlumatlar göstərilir. Aşağıya doğru irəlilədikdə, mağazada gəzərkən şəbəkə hüceyrələrinin məzmunu daha yeni qeydlərlə əvəz olunacaq. Beləliklə, şəbəkə DOM elementlərini mümkün qədər saxlayır. DOM-u kiçik tutmaq yaddaş istehlakını az tutur və yüksək tətbiqetmə təmin edir.

Bu addıma qədər olan kodu GitHub-da tapa bilərsiniz.

Paylaşım şəbəkənizi dizayn edin

Verilənləri daha asan təhlil etmək üçün şəbəkəni formatlaşdırmaq istəyirsiniz.

Grid Cell dayaq istifadə

Izgara hüceyrələrinin tərzini necə idarə edəcəyimizə baxaq. Adı cəsarətli etmək istəyirik - bunun ən yaxşı yolu hüceyrə dayağından istifadə etməkdir. Şəbəkə hüceyrəsi hüceyrənin necə göründüyünü idarə edən bir sıra parametrlər edir. Orada bir stil konfiqurasiyası qoyacağıq və sonra fontWeight qalınlığa bərabər olduğunu söyləyəcəyik.

hüceyrə = {{stil: {fontWeight: 'qalın'}}}

Ardıcıl bir düymə əlavə edin

Bu səhmlərdən birini almaq üçün tıklaya biləcəyimiz bir düyməni istədiyimizi düşünək. Bunu etmək üçün bir düymə ilə bir sütun əlavə edə bilərik. Mağazadakı heç bir sahəyə uyğun gəlmədiyi üçün bu dəfə heç bir məlumat indeksi əlavə edilmir. Bir düymə ilə bir WidgetCell əlavə edəcəyik. Bir az tərtib edəcəyik - düyməni belə görünməsi üçün istifadəçi interfeysinə tədbirlər əlavə edəcəyik:


    
        

İstifadə edəcəyimiz alış işləyicisi çox sadədir. Alış düyməsini basdıqda, satın aldığınız səhmdarın simvolu ilə kiçik bir mesaj görünəcək. Tıkladığınızda bu funksiya belə adlanır:

buyHandler = (button) => {let gridrow = button.up ('gridrow'), record = gridrow.getRecord (); Ext.toast ("$ {record.get ('name')}"}} alın)}
Bir şəbəkəyə bir düymə əlavə edin

Bu nümunədən də göründüyü kimi, əsasən hər hansı bir ExtReact komponentini bir ExtReact ızgara hüceyrəsinə yerləşdirə bilərsiniz və tamamilə interaktiv olacaqdır.

Bu addıma qədər olan kodu GitHub-da tapa bilərsiniz

Səhmlər şəbəkəsinə meyllər üçün parıltılı bir cədvəl əlavə edin

Səhmlər Verilişində son beş hissə satışı üçün bir sıra gənələrimiz var. Bunu bir parıldayan diaqram kimi ızgaraya yerləşdirək. Yenidən ExtReact komponentini bir grid hüceyrəsində göstərmək üçün Widgetcell istifadə edirik.

Tətbiqinizi npm start ilə çalıştırdığınızda, siçan işarəsini sparkline diaqramında fərqli nöqtələr üzərində hərəkət etdirin. Y dəyəri iki ondalık basamaqla formatlanır.

Bir cədvəldə trend qrafiki

Bu addıma qədər olan kodu GitHub-da tapa bilərsiniz.

Envanter məlumatlarının Excel-ə ixracı

Hər hansı bir məlumat yoğun tətbiqdə olduğu kimi, məlumatları Excel-ə ixrac edə bilmək istəyirik. Bu funksiyanı əlavə etmək üçün gridxporteru bu kimi bir ızgaraya əlavə edilmiş plaginlərə əlavə edək:

İxrac funksiyasını asanlaşdırmaq üçün tətbiqə bir neçə komponent əlavə edəcəyik. Şəbəkənin üstündəki başlıq çubuğunu və başlıq çubuğunu əlavə edəcəyik və bir menyu əlavə edəcəyik. "İxrac et" düyməsini vurduğunuzda Excel və ya CSV-yə ixrac edə bilərsiniz.

İxrac işləyicisi ixrac növünü və fayl adının uzantısını aşağıdakı kimi ötürür:

export = (type) => {this.grid.cmp.saveDocumentAs ({type, title: 'Stocks'}); }

İxracatçıdan asılılıq paketində aşağıdakı kimi keçməlisiniz:

"@ sencha / ext-exporter": "~ 6.6.0"

Asılılığı npm install ilə yükləməlisiniz və sonra proqramı işə salmaq üçün npm-ə başlamalısınız.

Raster məlumatlarını ixrac edin

İxracatçı plug-in, məlumatların müxtəlif fayl formatında ixrac olunmasına imkan verir. Yerli XSLX, Excel XML və HTML və CSV / TSV (Vergül / Tabla Ayrılmış Dəyər) formatlarını dəstəkləyir.

Bu addıma qədər olan kodu GitHub-da tapa bilərsiniz.

Paylaşım cədvəlinə bir redaktə funksiyası əlavə etmək

İş səhifəsi məlumatları idarə etmək bacarığını tələb edir. Bu xüsusiyyəti əlavə etmək üçün gridcellediting adlı başqa bir grid plagini əlavə etməliyik. Bu plagini əlavə edərək və sütunları tənzimlənə bilən kimi işarələyərək, artıq hər hansı bir qəfəs hüceyrəsinə cüt vurmaqla düzəldilə bilən bir cədvəliniz var. Şəbəkə hüceyrələrini gəzərək şəbəkəni daha da düzəldə bilərsiniz.

Gridcellediting ilə grid cell editing plugin əlavə edin: true və "Grid" sütununda "Name" -i aşağıdakı kimi tənzimlənə bilər:

Tətbiqinizi npm start ilə işləsəniz, artıq şəbəkə hüceyrələrini düzəldə bilərsiniz.

Bir şəbəkədə redaktə funksiyası

Tədbirlərin redaktə edilməsi

Şəbəkə hüceyrəsini düzəltdikdən sonra məlumatların dəyişdirilməsi üçün hadisəni yaddaşda dinləməlisiniz. Bunu etmək üçün bir dinləyici konfiqurasiyası və "Hadisə yeniləmə" üçün bir dinləyici əlavə edin. Yeniləmə hadisəsi, mağaza, yenilənmiş qeyd, əməliyyatı təsvir edən obyekt və daha sonra dəyişdirilmiş sahə adları daxil olmaqla bir sıra parametrləri ötürür. Bunu işləyiciyə əlavə edəcəksiniz.

Bu tətbiqdə yalnız bir tost mesajı göstərilir. Həqiqi dünyada, həqiqətən, iş məntiqindən istifadə edərdiniz, məsələn. B. verilənlər bazasındakı qalıcı dəyişikliklər.

...
Dinləyici: {update: this.onRecordUpdated}
...
onRecordUpdated = (saxla, qeyd et, icra et, modifiedFieldNames) => {const field = modifiedFieldNames [0]; Ext.toast ("$ {record.get ('name')} $ {field} $ {record.get (field)} ') güncəlləndi

Şəbəkə xanasına seçim seçimi əlavə edin

Bir grid xanasına bir Seçim seçimi əlavə etmək istəyirsinizsə, bunu SelectField adlı başqa bir ExtReact komponenti ilə edə bilərsiniz. Yalnız SelectField ExtReact komponentini istədiyiniz sütuna yapışdırın.


         

Tətbiqinizi npm start ilə işləsəniz, indi aşağıdakı seçim seçimlərini görəcəksiniz:

Şəbəkəyə seçim əlavə edin

Bu addıma qədər olan kodu GitHub-da tapa bilərsiniz.

Mobil təcrübələr üçün inventar hesablamasının optimallaşdırılması

Bu proqram masa üstü təcrübə üçün yaxşı işləyir, ancaq eyni tətbiqdən mobil telefon brauzerinizdə istifadə edərkən daha asan bir təcrübə əldə etmək istəyə bilərsiniz. Bu tətbiq üçün hücrə düzəlişi kiçik ekranlı mobil telefon düzəlişləri üçün ən yaxşı təcrübə olmaya bilər. Kiçik ekranlı cihazlar üçün fərqli bir düzəliş stili seçmək istəyə bilərsiniz.

ExtReact platformconfig seçimi masa üstü və ya mobil cihazlar üçün davranışı təyin etməyə imkan verir. PlatformConfig-ə əsaslanaraq hər dayaq üçün fərqli bir dəyər təyin edə bilərsiniz. Burada platformanı əsas götürərək plagini qurduq. Bu nümunədə tətbiq masaüstündə olduqda ızgara hüceyrəsi düzəlişindən istifadə edirik. Tətbiq mobildirsə, mobil cihazdakı məlumatları daha yaxşı idarə etmək üçün gridedable istifadə edirik:

platformConfig = {{masa üstü: {Plugins: {gridexporter: true, gridcellediting: true}}, '! masa üstü ': {Plugins: {gridexporter: true, gridedable: true}}}}

Tətbiqinizi npm start ilə çalıştırdığınızda, mobil görünüşü aşağıdakı kimi görə bilərsiniz:

Mobil cihazdakı səhmlər tətbiqi

Bu addıma qədər olan kodu GitHub-da tapa bilərsiniz.

Xülasə

Bu Səhmlər elektron cədvəli tətbiqi, React 16 və Sencha ExtReact istifadə edərək məlumat əsaslı veb tətbiqetminizdə masa kimi bir interfeys yaratmağın nə qədər asan olduğunu göstərir. Bitmiş çalışan tətbiqetmə Sencha Fiddle-da baxa bilərsiniz.