jQuery EasyUI menu ad albero - menu ad albero per aggiungere un nodo
Questo tutorial vi mostra come collegare un nodo al menù ad albero (Tree). Creeremo un nodo albero alimento che contiene frutta e verdura, e poi aggiungere qualche altra frutta al nodo frutta esistente.
Crea l'albero cibo
Innanzitutto, creiamo albero cibo, il codice è il seguente:
<Div style = "width: 200px; height: auto; border: 1px solid #ccc;"> <Ul id = classe "tt" = "easyui-tree" url = "tree_data.json"> </ ul> </ Div>
Si prega di notare che la componente Tree (Albero) è definito nel tag <ul>, dati del nodo albero caricati da URL "tree_data.json".
Prendi il nodo padre
Poi abbiamo scelto nodo frutta facendo clic sul nodo, aggiungeremo qualche altro dato frutti. Esecutivo getSelected ottenuto nodo di elaborazione:
nodo var = $ ( '# tt') Albero ( 'getSelected') .;
risultato di ritorno metodo getSelected è un oggetto JavaScript che ha un id, testo, bersaglio di proprietà. proprietà target è un riferimento a un oggetto DOM è selezionato il nodo, il suo metodo di aggiunta sarà utilizzato per i nodi figlio in più.
nodi aggiuntivi
nodo var = $ ( '# tt') Albero ( 'getSelected') .; if (node) { nodi var = [{ "Id": 13, "Testo": "Raspberry" }, { "Id": 14, "Testo": "Cantalupo" }]; $ ( '# Tt'). Albero ( 'append', { genitore: node.target, dati: i nodi }); }
Quando si aggiunge un po 'di frutta, si vedrà:
Come si può vedere, utilizzando albero easyui (Albero) plug-in a un nodo supplementare non è così difficile.