Puteți face asta cu o grilă de date JavaScript?

Acest articol a fost susținut cu amabilitate de dragii noștri prieteni de la Progress Kendo UI, care se angajează să ofere dezvoltatorilor instrumentele de care au nevoie pentru a valorifica și stăpâni evoluția tehnologică care modelează societatea noastră și lumea. Mulțumesc!

Grilele de date, cunoscute și sub numele de tabele de date, sunt esențiale în prezentarea unor cantități masive de date utilizatorilor. Utilizatorii ar trebui să poată vizualiza datele într-un mod ușor de înțeles, analizat și manipulat. Cu toate acestea, construirea vizualizărilor grilei de date având în vedere performanța, viteza și experiența utilizatorului poate fi o sarcină deosebit de descurajantă. Acest lucru este valabil mai ales atunci când le construiți de la zero sau când utilizați biblioteci cu funcționalități limitate și performanțe sub-normale.

Nu lipsesc bibliotecile care grupează grile de date. Cu toate acestea, majoritatea oferă doar un set limitat de caracteristici de grilă, comune printre ele fiind paginarea, filtrarea, sortarea și tematica. Alte biblioteci de grile de date sunt construite ca pachete care se bazează pe mai multe dependențe. Aceste tipuri de biblioteci au un impact nefavorabil asupra performanței rețelei dvs. în comparație cu omologii lor nativi. Ele nu sunt construite din nou pentru fiecare cadru sau limbă. Ca atare, aceste biblioteci non-native pot fi lente, pot să nu profite de caracteristicile superioare ale unui cadru/limbaj, să nu aibă funcționalități cruciale și să necesite o configurare suplimentară pentru a funcționa.

Un alt lucru prin care se caracterizează aceste biblioteci este experiența slabă a utilizatorului. Adesea, ei nu reușesc să implementeze design responsive pentru diferite dimensiuni și orientări ale ecranului, nu sunt în măsură să blocheze sau să devină lipicioase părți ale unei grile și fac accesibilitatea o idee ulterioară. În plus, oferă doar editare în forme separate de grilă, care implică adesea mai multe acțiuni de finalizat. Acest lucru poate fi obositor și repetitiv, în special atunci când editați numeroase elemente de date. Alții nici măcar nu oferă editare. În plus, ei tind să le lipsească funcționalitatea de export de date și îi lasă pe utilizatori să se bazeze pe imprimarea paginilor web pentru exporturi.

Datorită funcționalității și caracteristicilor lor limitate, trebuie să le completați cu biblioteci separate pentru a construi o grilă adecvată. De exemplu, pentru a reprezenta datele grafice, va trebui să utilizați o altă bibliotecă de diagrame, deoarece biblioteca grilă nu o va oferi. În plus, nu puteți încorpora aceste componente necorelate în rețea, deoarece suportul pentru ele nu este încorporat.

Pentru a rezolva aceste probleme, ar trebui să utilizați o bibliotecă care nu este doar construită pentru a fi nativă, ci și care încorporează o gamă de componente complementare și se concentrează pe experiență și performanță excelentă pentru utilizator. Pentru a demonstra caracteristicile unei grile de date ideale, vom folosi grilele de date Kendo UI ca exemplu. Aceste grile de date sunt una dintre cele peste 100 de componente disponibile într-un pachet de bibliotecă numit Progress Kendo UI. Pachetul constă din patru biblioteci de componente construite nativ pentru mai multe cadre frontend. Acestea sunt Kendo UI pentru Angular, KendoReact, Kendo UI pentru Vue și Kendo UI pentru jQuery. Exemplele oferite de-a lungul acestei piese vor prezenta grile din toate cele patru biblioteci.

Design receptiv

Când vine vorba de grile de date, utilizatorii dvs. trebuie să aibă o vedere completă a datelor cu care lucrează. Datele care sunt ascunse sau dificil de accesat sunt frustrante de citit și îi îndepărtează complet pe utilizatori. Multe biblioteci de grile nu își fac grilele receptive și depinde de tine să o implementezi folosind stilul și ceva logică. Acest lucru poate fi complicat mai ales în cazul datelor care conțin foarte multe coloane. Dacă construiți mai multe grile cu diferite tipuri de date cu nevoi de reprezentare diferite, acest lucru agravează și mai mult complexitatea. Trebuie să vă dați seama de defilare, interogări media, dimensiuni de font, scalare, dacă să omiteți anumite părți ale datelor și așa mai departe.

Tabelele moderne de date ar trebui să poată răspunde la schimbările de orientare și să afișeze bine toate datele pe toate dimensiunile de ecran. De exemplu, grilele de date Kendo UI își ajustează dimensiunea în funcție de dimensiunea ferestrei de vizualizare și de numărul de rânduri pe care le găzduiește. De exemplu, în Grila unghiulară, îi puteți seta înălțimea și grila va deveni derulabilă dacă o parte din conținutul său nu se potrivește. Setarea înălțimii implică doar specificarea unei valori pentru proprietatea CSS înălțimea grilei și asigurarea faptului că elementul părinte are și un set de înălțime. Nu este necesară nicio altă configurație. Puteți vedea cum se face acest lucru în acest exemplu de tabel de stoc aici.

În plus, puteți alege să comutați vizibilitatea coloanelor din grilă, afișând în continuare toate datele necesare. Reușiți acest lucru creând coloane diferite pentru diferite intervale de dimensiuni de ecran și folosind proprietatea media pe o coloană pentru a decide unde să le afișați. De exemplu, în acest tabel de date unghiulare, pentru ecrane de dimensiuni mai mari ( media="(min-width: 450px)" ), coloanele sunt afișate complet și arată astfel.

Cu toate acestea, puteți alege să ascundeți coloanele de preț, stoc și întrerupt pe afișajele medii ( media="(min-width: 680px)" ). Acesta ar trebui să arate așa:

Pe ecrane mai mici ( media="(max-width: 450px)" ) , puteți crea o singură coloană personalizată pentru a afișa toate datele similare cu aceasta:

Grilele de date Kendo UI acceptă și identificatorii de dispozitiv Bootstrap 4, cum ar fi xs, sm, md, lg și xl . Deși este mai ușor de utilizat, nu este la fel de versatil, deoarece limitează numărul de interogări pe care le puteți include la una. De exemplu, cu propriile puncte de întrerupere ați putea avea ceva de genul media="(min-width: 500px) and (max-width: 1200px)" . Combinarea mai multor identificatori nu este posibilă cu identificatorii de dispozitiv Bootstrap 4.

Conformitatea accesibilității

Asigurarea că rețeaua dvs. îndeplinește standardele moderne de accesibilitate ar trebui să fie o prioritate. Făcând acest lucru, se asigură că persoanele cu dizabilități se pot angaja cu rețeaua dvs. și garantează că există echitate între utilizatorii dvs. Cu toate acestea, unele biblioteci nu fac nimic pentru a se asigura că grilele lor sunt accesibile. Alții fac doar strictul minim, rezultând grile substandard atunci când sunt evaluate pentru accesibilitate. Mărirea acestor grile pentru a fi accesibile implică o cantitate suficientă de muncă. Acest lucru este complicat și mai mult de modelele de grilă mai complicate. Deși această muncă va fi profitabilă mai târziu pentru tine și utilizatorii tăi, aceste biblioteci ar fi trebuit să facă din accesibilitate o parte esențială a produselor lor.

Kendo UI Data Grids îi acordă prioritate prin sprijinirea principalelor standarde de accesibilitate precum WAI-ARIA, Secțiunea 508 și WCAG 2.1. De exemplu, KendoReact urmează standardul Secțiune 508, asigurându-se că majoritatea componentelor sale sunt complet accesibile și acceptă navigarea de la tastatură. Urmează ghidul WCAG Accesibil la tastatură, făcând operaționale grila și tastatura cu toate componentele ei încorporate. Ca rezultat, React Grid atinge cel mai înalt nivel de conformitate WCAG AAA. Fiind o componentă web, KendoReact Data Grid îndeplinește specificația WAI-RAI pentru a se asigura că utilizatorii cu dizabilități pot interacționa adecvat cu aceasta pe paginile web. În această grilă de date React, de exemplu, puteți naviga la diferitele componente și rânduri folosind o tastatură.

Defilare virtuală

Cu derularea virtuală, numai un segment de date este redat în grilă. Acesta este de obicei setat ca un număr de înregistrări de preluat. Când un utilizator defilează pe lângă acest segment, este redat altul de aceeași dimensiune. Acest lucru ajută la performanță, deoarece redarea unui set mare de date ocupă multă memorie și împiedică performanța și viteza rețelei dvs. Derularea virtuală oferă iluzia de a reda toate datele fără niciuna dintre consecințele performanței.

Defilarea virtuală nu este adesea acceptată de bibliotecile grile. În schimb, încurajează paginarea, care poate să nu fie cea mai bună experiență pentru utilizatori atunci când vizualizează cantități masive de date. Când încercați să redați cantități enorme de date, performanța rețelei suferă și mai mult, contribuind la o experiență groaznică a utilizatorului. Pentru bibliotecile care acceptă derularea virtuală, aceasta se aplică numai înregistrărilor din date și nu părților specifice ale înregistrărilor. Acest lucru este deosebit de limitator atunci când datele au mai multe coloane.

Kendo UI acceptă derularea virtuală atât pentru datele locale, cât și la distanță. De exemplu, în interfața de utilizare Kendo pentru jQuery Grid, îl activați setând proprietatea scrollable.virtual a unei grile la true. Prin setarea acestui lucru, grila încarcă numai numărul de elemente specificat de proprietatea pageSize a sursei de date grilă. Puteți vedea cum funcționează acest lucru în această grilă de date jQuery care utilizează date locale.

 <!DOCTYPE html> <html> <head>...</head> <body> ... <div></div> <script> var dataSource = new kendo.data.DataSource({ pageSize: 20, ... }); $("#grid").kendoGrid({ dataSource: dataSource, scrollable: { virtual: true }, ... }); </script> </body> </html>

Aceeași setare va funcționa pentru datele de la distanță, așa cum se vede în acest tabel de date jQuery. În plus, puteți utiliza o setare similară pentru a virtualiza coloanele unei grile dacă înregistrările conțin mai multe proprietăți care ar putea fi costisitoare de redate simultan. Proprietatea scrollable.virtual trebuie setată la true. Cu toate acestea, virtualizarea coloanelor nu depinde de proprietatea pageSize . Acest exemplu demonstrează această caracteristică.

Exporturi PDF și Excel

A avea capacitatea de a exporta date din grilă este esențial. Este posibil ca utilizatorii să fie nevoiți să îl distribuie sau să îl manipuleze în continuare folosind aplicații precum foile de calcul. Utilizatorii dvs. ar trebui să aibă opțiunea de a partaja fără durere date fără a fi limitați la rețea. Datele din grilă pot necesita, de asemenea, procesări suplimentare care nu sunt oferite de grilă, cum ar fi foile de calcul și software-ul de prezentare.

Deși acesta este un caz de utilizare esențial, nu este luat în considerare în multe biblioteci. Utilizatorii trebuie să recurgă la imprimarea paginilor web întregi pentru a avea acces la datele în formate PDF. Când transferă date către aplicații externe, acestea trebuie să le copieze și să le lipească de mai multe ori. Acest lucru este de înțeles destul de enervant.

Kendo UI Data Grids oferă exporturi de date din grilă în două formate: PDF și Excel. De exemplu, în interfața de utilizare Kendo pentru Vue Data Grid, pentru a procesa exporturile PDF, ați folosi componenta GridPDFExport . Cu metoda sa de save , veți transmite datele pe care doriți să le includeți în exportul PDF. Datele pot fi paginate sau setul complet.

 <template> <button @click="exportPDF">Export PDF</button> <pdfexport ref="gridPdfExport"> <Grid :data-items="items"></Grid> </pdfexport> </template> <script> import { GridPdfExport } from '@progress/kendo-vue-pdf'; import { Grid } from '@progress/kendo-vue-grid'; export default { components: { 'Grid': Grid, 'pdfexport': GridPdfExport }, data: function () { return { products: [], ... }; }, methods: { exportPDF: function() { (this.$refs.gridPdfExport).save(this.products); }, ... }, ... }; </script>

Componenta GridPDFExport vă permite să specificați dimensiunile paginii pentru export, marginile paginii, cum să scalați grila pe pagină etc. Acest lucru este util pentru personalizarea grilelor mai mari pentru a se potrivi paginilor PDF. Le-ați transmite componentei ca proprietăți. Iată un exemplu:

 <pdfexport ref="exportPDF" :margin="'2cm'" :paper-size="'a4'" :scale="0.5"> <Grid :data-items="products"></Grid> </pdfexport>

Puteți alege să personalizați în continuare exportul folosind un șablon. În cadrul șablonului, puteți adăuga stil, puteți specifica anteturi și subsoluri, puteți modifica aspectul paginii și puteți adăuga elemente noi. Ai folosi CSS pentru stil. După ce ați terminat de configurat șablonul, îl specificați folosind proprietatea șablon de pagină a componentei GridPDFExport.

Pentru a exporta fișiere Excel dintr-o grilă Kendo UI Vue, ați folosi componenta ExcelExport . Cu metoda sa saveExcel , îi transmiteți numele fișierului, datele grilei, coloanele de afișat etc. și apelați metoda pentru a genera fișierul. Această grilă de date Vue este un exemplu excelent al modului în care puteți realiza exporturi Excel cu Kendo UI Vue Grid.

Coloane lipicioase

Când un utilizator parcurge o grilă pe orizontală, poate fi necesar să aibă unele coloane înghețate sau în mod constant vizibile. Aceste coloane conțin de obicei informații cruciale, cum ar fi ID-uri, nume etc. Coloanele înghețate/lipioase rămân întotdeauna vizibile, dar se pot deplasa fie la marginile din stânga, fie din dreapta ale grilei, în funcție de direcția de derulare, sau să nu se miște deloc. De exemplu, în această demonstrație a grilei de date Vue, ID-ul este înghețat, iar coloana Întreruptă este lipicioasă.

Coloanele lipicioase din bibliotecile de grilă pot fi o apariție rară. Dacă nu este prezent, implementarea lui de la zero poate fi un efort dificil. Va necesita un stil semnificativ pentru a realiza și s-ar putea să nu se scaleze bine dacă aveți nevoie de numeroase grile.

Configurarea coloanelor sticky în Kendo UI necesită o configurare minimă. De exemplu, într-o grilă Kendo UI Vue, va trebui să setați proprietatea locked a unei coloane la true pentru a o face lipicioasă. În acest tabel de date Vue, coloanele ID și Discontinued devin lipicioase prin setarea proprietății locked . În exemplul de mai jos, ID-ul și Vârsta sunt blocate.

 <template> <grid :data-items="people" :columns = "columns"> </grid> </template> <script> import { Grid } from '@progress/kendo-vue-grid'; import { people } from './people' export default { components: { 'grid': Grid }, data: function () { return { people: this.getPeople(), columns: [ { field: 'ID', title: 'ID', locked: true}, { field: 'FirstName', title: 'FirstName' }, { field: 'LastName', title: 'LastName' }, { field: 'Age', title: 'Age', locked: true}, ] }; }, methods: { getPeople() { return people; } } }; </script>

Editare

Principalul caz de utilizare al unei grile este de a vizualiza cantități mari de date. Unele biblioteci se țin de acest lucru și nu iau în considerare posibilitatea ca editarea să fie necesară. Acest lucru dezavantajează utilizatorii, deoarece editarea este o caracteristică destul de utilă. Când utilizatorii solicită acest lucru, dezvoltatorii sunt apoi forțați să creeze o pagină separată pentru editarea intrărilor individuale. Pentru a adăuga la aceasta, utilizatorii pot edita doar o intrare după alta pe un formular. Acest lucru este obositor și creează o experiență proastă pentru utilizator, mai ales atunci când se manipulează cantități mari de date.

Un caz de utilizare important pentru editarea grilei este facilitarea editării loturilor. Este util pentru modificarea cantităților mari de date dintr-o dată. Acest lucru ar putea implica ștergerea, crearea și actualizarea datelor.

Kendo UI Data Grids permite editarea în două forme: inline și folosind ferestre pop-up. Cu editarea inline, toate datele sunt editate în grilă. Când se face clic pe o celulă, aceasta devine editabilă. Într-un pop-up, un formular pop-up este utilizat pentru a edita fiecare intrare individual. În acest exemplu de tabel Kendo UI pentru jQuery, editarea unei grile implică trei pași: setarea configurației editabile a grilei, stabilirea unei surse de date și configurarea operațiunilor CRUD pe sursa de date. Acești câțiva pași reduc complexitatea implicată în configurarea editării loturilor. Configurarea editării pop-up urmează aceiași pași, dar cu opțiuni diferite la început.

Pe lângă suportul pentru editări, interfața de utilizare Kendo pentru jQuery Grid permite validarea intrărilor. De exemplu, puteți face intrări necesare sau puteți aplica o lungime minimă. Pe lângă asta, puteți crea controale de intrare personalizate. Controalele de intrare nu se limitează doar la câmpurile de text. Puteți utiliza meniuri derulante, casete de selectare, selectoare de date, glisoare de interval etc. Acestea pot fi atât în ​​linie, cât și în ferestre pop-up. În acest tabel de date jQuery, câmpul Categorie este un drop-down. Validarea este, de asemenea, demonstrată în același exemplu. Câmpul preț unitar are validarea impusă, asigurându-se că valoarea minimă a acestuia este 1.

Componente suplimentare

Majoritatea bibliotecilor de grile au un scop singular: acela de a oferi o grilă. Nu se livrează cu nimic altceva, doar cu grila. Sunteți limitat la funcțiile pe care le oferă. Dacă trebuie să completați grila, poate fi dificil, deoarece este posibil ca alte biblioteci să nu fie compatibile cu aceasta. Deci, trebuie doar să rămâneți în limitele bibliotecii atunci când construiți o grilă.

Kendo UI rezolvă acest lucru deoarece abordarea creatorului său este de a oferi o bibliotecă cuprinzătoare de componente care se integrează cu ușurință între ele în loc de componente individuale. Grila face parte dintr-o bibliotecă de numeroase componente care vă permit să faceți totul, de la gestionarea datelor, navigare, diagrame, editare, prezentare media, facilitarea chatului și așa mai departe. Puteți alege să încorporați aceste componente în grilă fără a fi nevoie să efectuați o configurare elaborată și, eventual, să o rupeți. Integrarea acestora este perfectă și necesită o configurație minimă. Luați, de exemplu, acest tabel de date unghiular, coloana sa 1 zi încorporează o diagramă complet interactivă pentru fiecare rând fără probleme. Puteți încorpora orice număr de componente într-o grilă având încredere că va funcționa și că toate caracteristicile sale vor funcționa conform așteptărilor.

Concluzie

Grilele de date trebuie să fie ușor de înțeles, captivante, receptive și accesibile. Trebuie să funcționeze bine și să încarce datele rapid. Cu toate acestea, construirea unei rețele de date care îndeplinește aceste standarde de la zero poate dura mult timp și poate fi o activitate uriașă. Puteți opta pentru a utiliza biblioteci de grile de date, dar adesea acestea nu sunt optimizate pentru performanță, nu sunt accesibile și sunt livrate doar cu o singură componentă de grilă.

Crearea unei grile de date atrăgătoare, care să fie plăcută de utilizat necesită o bibliotecă care se concentrează pe performanță. Poate face acest lucru creând nativ și acceptând derularea virtuală. Grila de date pe care o furnizează trebuie să fie receptivă și să utilizeze coloane lipicioase. Acest lucru este astfel încât utilizatorii să poată vizualiza cu ușurință datele, indiferent de dimensiunea sau orientarea ecranului. Accesibilitatea ar trebui să fie o preocupare centrală a rețelelor. Acest lucru garantează că toți utilizatorii pot avea o experiență egală folosindu-le.

Tabelele de date ar trebui să extindă ceea ce poate face un utilizator cu datele. Acest lucru poate fi realizat prin editarea și facilitarea exporturilor în mai multe formate. În plus, aceste biblioteci ar trebui să fie livrate cu alte componente pentru a completa grila. Având componente compatibile într-o singură bibliotecă, elimină nevoia de a utiliza mai multe biblioteci diferite aflate în conflict într-o singură aplicație. O bibliotecă grilă de date care oferă aceste caracteristici vă va ajuta să creați un produs grozav pentru utilizatorii dvs. fără prea multe complicații.