Questo post è stato modificato l'ultima volta da szxiaxiaojun il 11-7-2019 alle 23:20
Nello sviluppo quotidiano di progetti web, spesso ci imbattiamo nella visualizzazione dei dati sulla struttura ad alberi, che vengono ottenuti dal database e mostrati a forma di albero. Per comodità, possiamo scrivere un controllo ad albero cross-browser per JavaScript che potrà essere riutilizzato in futuro. Questa sezione condivide un plugin JS tree sviluppato da sé stesso, che può essere scaricato e utilizzato direttamente per amici bisognosi. È necessario implementare un plugin ad albero (1) Organizzare automaticamente i dati in relazioni subordinate, in modo che non sia necessario organizzare la relazione tra superiori e subordinati aggiungendo manualmente i dati o ottenendo dati dal database nel front-end (2) Supporta il caricamento personalizzato dell'albero delle directory Supporta il caricamento dei dati in formati XML e JSON (3) Realizzare la funzione di selezione dei nodi albero (selezione singola, selezione multipla [selezione a cascata]). (4) Supportare il caricamento una tantum dei big data 。。。。。。 Iniziamo a condividere un plugin Tree che ho scritto: questo plugin si basa su Jquery e necessita di riferimenti
Primo: l'oggetto JSON del parametro di ogni nodo albero nel plugin è mostrato di seguito nodeItem: funzione () {
return {
nodecode: "", // nodecode
nodetext: "", // nodo text [nodo display text]
nodetitle: "", // node title [nodo text per moto mobile display obsoleto]
supnodecode: "", // Codice nodo superiore [definire il codice nodo genitore a cui appartiene questo nodo, e formare una relazione subordinata tramite questo codice]
nodeurl: "", // URL del nodo rappresenta l'indirizzo URL del link personalizzato dal nodo corrente
iconexpand: "", // Icona Espandi il nodo [Icona visualizzata nel nodo albero della directory nello stato espanso personalizzato, se vuota, si usa l'icona predefinita]
iconcollapse: "" // Node Shrink Icon [Icona visualizzata nel nodo dell'albero della directory in uno stato di riduzione personalizzata, se vuota, viene usata l'icona predefinita]
}
} Secondo: tre modi per caricare l'albero delle directory 1. loadJson(Json) Array di nodi albero della directory oggetti JSON (completato in una sola volta) Il formato JSON è un array di argomenti per ogni elemento di un oggetto nodeItem
[ { nodecode: "", nodetext: "", nodetitle: "",supnodecode: "",nodeurl: "",iconexpand: "" ,iconcollapse: "" },
{},...
]
2. dati del nodo in formato stringa XML loadXml(xml) (completamento una tantum)
Nota: Usa il formato stringa XML Nota che il node tagName:nodecode nodetext, ecc. non può essere modificato, perché il programma si ottiene direttamente usando questo nome
<root>
<item> // Ogni nodo contiene più valori di dati
<nodecode><![CDATA[valore di codifica del nodo]></nodecode>
<nodetext><![CDATA[nome nodo testo]]></nodetext>
<nodetitle><![CDATA[movimento del mouse, nodo nel testo del prompt di visualizzazione]></nodetitle>
<supnodecode><![CDATA[Codifica genitore del nodo]></supnodecode>
<nodeurl><![CDATA[Indirizzo Link Associato al Nodo]></nodeurl>
<iconexpand><![CDATA[Mostra il percorso dell'icona quando il nodo si espande]></iconexpand>
<iconcollapse><![CDATA[Mostra il percorso dell'icona quando il nodo si restringe]></iconcollapse>
</item> ... ...
</root>
3. Aggiungere manualmente gli elementi dei nodi uno alla volta (due passaggi per completarli) tramite il metodo addNodeItem(nodeItem) tramite il metodo degli oggetti plug-in
Puoi creare un albero chiamando manualmente questo metodo tramite l'oggetto plugin makeTree().
Terzo: metodo degli eventi per riorganizzare la relazione tra subordinati e subordinati all'interno dell'albero delle directory Attraverso questo metodo, possiamo risolvere il problema che il nostro front-end non deve più distinguere in base alla relazione tra subordinati e subordinati. Quarto: Quanto sopra è solo una breve introduzione ai principali metodi di caricamento e riorganizzazione di Tree. Di seguito pubblicheremo il codice completo del plugin JS con commenti dettagliati nel codice Funzioni del plug-in: check, singola, espandi, piega, mostra/nascondere la connessione dei nodi, supporta l'inserimento dei nodi, la cancellazione dei nodi, la personalizzazione delle icone dei nodi, l'impostazione della selezione dei nodi, l'ottenimento dei nodi di selezione dell'albero delle directory (supportano XML, JSON, ecc.) Menu con il tasto destro (non supportato per il momento, perché è necessario usare il livello pop-up, questa funzione viene bloccata e rimossa) Supporta il clic dei nodi, il doppio clic, eventi di modifica della selezione dei nodi, ecc L'effetto finale di visualizzazione Scarica allegato:
Tree_Demo.rar
(54.71 KB, Numero di download: 1)
| 
Pubblicato su 11/07/2019 11:20:12
|
|
|
|
