Cum se creează o grilă HTML CSS
O grilă de date Javascript eficientă și robustă este vitală pentru construirea unei aplicații web cu consum mare de date. Volumele masive de date generate de întreprinderile mici și mijlocii impun nevoia de instrumente bune pentru dezvoltatori JavaScript care vă pot ajuta să construiți aplicații web capabile să gestioneze milioane de puncte de date. Ext JS îndeplinește toate cerințele dvs., de la construirea unei simple grile HTML CSS până la o grilă de date HTML 5 receptivă mai complexă și mai sofisticată. Continuați să citiți pentru instrucțiuni pas cu pas despre cum să creați o grilă HTML5 . Pentru a menține lucrurile simple, creăm o aplicație folosind doar un singur fișier HTML. Puteți pune tot codul JavaScript în același fișier. Grila finală de date JavaScript pe care o vom construi arată după cum urmează: Pasul 1: Ce fișiere trebuie să import pentru a crea grila HTML CSS? Ca prim pas, conectați foaia de stil CSS din proiectul dvs. de grilă HTML 5. Acest fișier va importa aspectul grilei CSS. Creați un fișier HTML gol și adăugați următoarea linie oriunde în antetul fișierului HTML: Apoi, trebuie să includeți biblioteca Ext JS pentru a importa obiectele HTML CSS. Adăugați asta în fișierul HTML: Pasul 2: Cum creez modelul de date pentru grila HTML CSS? Pentru a configura grila de date în JavaScript, trebuie să definiți modelul de date cu toate câmpurile grilei noastre. Acest lucru este definit în metoda onReady() pe care o puteți adăuga la secțiunea de script a fișierului HTML. Ext.onReady(funcție() { Ext.define(“com.extjsGrid.Sencha”, { extinde: „Ext.data.Model”, câmpuri: [“Produs”, “Mediu”, “Descriere”] }); Codul de mai sus definește un model de grilă com.extjsGrid.Sencha cu trei câmpuri de date numite Produs, Mediu și Descriere. Rețineți că această onReady() nu este încă completă. Mai trebuie să definim stocul de date și metoda de afișare în interiorul acestuia. Pasul 3: Cum creez depozitul de date pentru grila HTML CSS? Ca al treilea pas pentru crearea grilei de date JavaScript, trebuie să creați un depozit de date pentru grila noastră de date HTML 5. Vom crea o variabilă senchaStore care este legată de modelul nostru de date com.extjsGrid.Sencha . Vom popula grila de data folosind cheia de date a obiectului nostru de depozit de date JSON. Adăugați metoda onReady() cu următorul cod. var senchaStore = Ext.create(“Ext.data.Store”, { model: “com.extjsGrid.Sencha”, date: [ {‘Product’: ‘Ext JS’, ‘Environment’: ‘Javascript’, „Descriere”: „Ext JS este cel mai cuprinzător cadru JavaScript pentru construirea de aplicații web multiplatforme, bogate în funcții”}, {‘Produs’: ‘React Grid’, ‘Environment’: ‘React’, „Descriere”: „React Grid de la Sencha este o soluție de rețea perfectă și modernă de calitate pentru întreprindere pentru React UI, care vine cu peste 100 de funcții uimitoare ale rețelei de date.’}, {‘Product’: ‘Ext Angular’, ‘Environment’: ‘Angular’, „Descriere”: „ExtAngular oferă cel mai complet set de componente pentru construirea de aplicații web cu consum mare de date folosind Angular.’}, {‘Product’: ‘Ext React’, ‘Environment’: ‘React’, „Descriere”: „ExtReact este cel mai complet set de componente React pentru construirea de aplicații web cu consum mare de date folosind React”}, {‘Produs’: ‘ExtWebComponents’, ‘Mediu’: ‘Javascript’, „Descriere”: „ExtWebComponents oferă un set de peste 140 de componente UI pentru dezvoltarea aplicațiilor, independent de cadrul de lucru.”} ] }); Pasul 4: Cum afișez grila HTML 5? Puteți afișa grila de date HTML 5 utilizând panoul Ext JS. Adăugați următorul cod după adăugarea depozitului de date […]
