Ce vom face și ce vom obține ca rezultat?
Pentru a face mai ușor să vedem cum este construită ierarhia, creați un tabel în mysql și hackați datele de testare în ea. Mai jos este codul sql pentru ambele. Baza de date de obicei se numește webdevkin.
Date de testare
Acum vă puteți uita la tabelul de categorii din phpMyAdmin-e sau dbForgeStudio familiar și continuați să creați mini-aplicația noastră.
Structura proiectului
Dosarul js este împărțit în memorie veche de către furnizor și module. Primul dosar va conține librăriile jquery și jstree. Clarify - jquery este necesar nu numai pentru noi, ci și ca o dependență pentru jstree. În dosarul module, singurul fișier principal.js este principalul script js al aplicației. În directorul php vom trimite index.php, care va efectua toate lucrările de pe server.
Server code - index.php
Lista este simplă și, odată cu implementarea, nu ar trebui să existe probleme. La începutul fișierului, declarăm constantele necesare pentru conectarea la baza de date.
Apoi scriem funcția de conectare la baza de date, folosind mysqli.
Cu partea server a aplicației noastre totul, du-te la client.
Marcare pentru pagina de catalog - index.html
Și în corpul secțiunii este simplu.
Și adăugați un markup la main.css
Cu html / css terminat și acum treceți la codul de creație cel mai interesant - javasctipt-tree. Aici vom pune împreună toate funcționalitățile planificate.
main.js - inițializați aplicația
Să o aplicăm și aici: să creeze un modul bazat pe închidere, să stocheze cache elementele necesare dom, să scrie niște metode private și o metodă publică pentru inițializarea aplicației.
Modul schelet
Obținem datele de pe server - metoda _loadData ()
Construirea unui copac în funcția _initTree, folosind jstree
Și asta e tot! Se pare vizual cea mai dificila parte a aplicatiei la urgenta este simpla. Trebuie doar să aplicați metoda jstree la un anumit element dom cu anumiți parametri. În cazul nostru, trecem datele în câmpul de date în sine, multiple: false indică faptul că nu avem nevoie de mai multe alocări și check_callback: true indică faptul că dorim să facem ceva după ce arborele este schimbat.
Link-uri utile
Trimiteți-le prietenilor: