1. Home
  2. jQuery EasyUI drzewa menu - menu Drzewo dodać węzeł

Najlepszy samouczek jQuery EasyUI drzewa menu - menu Drzewo dodać węzeł W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

jQuery EasyUI drzewa menu - menu Drzewo dodać węzeł

Ten poradnik pokazuje, jak dołączyć do menu węzeł drzewa (drzewo). Stworzymy węzeł drzewa żywności, która zawiera owoce i warzywa, a następnie dodać jakieś inne owoce do istniejącego węzła owocowego.

Tworzenie drzewa żywności

Po pierwsze, tworzenie drzewa żywności, kod jest następujący: 

	<Div style = "width: 200px; height: auto; border: 1px solid #ccc;">
		<Ul id = class "tt" = "easyui-tree" url = "tree_data.json"> </ ul>
	</ Div>

Należy pamiętać, że drzewo (drzewo) składnik jest zdefiniowana w znaczniku <ul> dane węzła drzewa załadowane z URL "tree_data.json".

Uzyskaj węzeł nadrzędny

Następnie wybieramy węzeł owoców klikając węzeł, dodamy jakieś inne dane owocowe. Wykonawczy getSelected uzyskane węzła technologicznego: 

	Węzeł var = $ ( '# tt') drzewa ( "getSelected") .;

return result Sposób getSelected javascript jest obiekt, który ma identyfikator, tekst, kierować nieruchomości. Obiekt docelowy jest odwołanie do obiektu DOM węzeł jest wybrana, jej metody append zostaną wykorzystane dla dodatkowych węzłów potomnych.

Dodatkowe węzły 

	Węzeł var = $ ( '# tt') drzewa ( "getSelected") .;
	if (node) {
		węzły var = [{
			"Id": 13,
			"Tekst": "Malina"
		}, {
			"Id": 14,
			"Tekst": "kantalupa"
		}];
		$ ( '# Tt "). Drzewo (" append ", {
			parent: node.target,
			danych: węzły
		});
	}

Po dodaniu trochę owoców, można zobaczyć:

Jak widać, przy użyciu easyui drzewa (drzewo) plug-in do dodatkowego węzła nie jest tak trudne.

Pobierz przykłady jQuery EasyUI

jeasyui-tree-tree3.zip

Hot Tutorials

Contact US

jQuery EasyUI drzewa menu - menu Drzewo dodać węzeł
10/30