1. Home
  2. jQuery EasyUI drzewa menu - menu Tree Dodaj Rodzic / węzły potomne

Najlepszy samouczek jQuery EasyUI drzewa menu - menu Tree Dodaj Rodzic / węzły potomne W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

jQuery EasyUI drzewa menu - menu Tree Dodaj Rodzic / węzły potomne

Zwykle oznacza węzeł drzewa jest w każdym calu węzeł przechowuje parentId. To jest także nazywany sąsiedztwa lista modelu. Bezpośredni ładowania danych do drzewa menu (drzewo) jest niedozwolone. Ale możemy przed menu załadunku drzewa, umieścić go do standardowego menu standardowe drzewa (tree) formatu danych. Drzewo (Tree) plug-in zapewnia opcję 'A' loadFilter funkcjonować, może osiągnąć taką funkcjonalność. To stwarza okazję do zmiany jakichkolwiek danych przychodzących. Ten poradnik pokazuje, jak korzystać z funkcji rodzica loadFilter 'załadować węzeł / dziecko do menu drzewa (drzewo).

Rodzic / dziecko Dane węzła 

	[
	{ "Id": 1, "parendId": 0 "name": "przekąski"},
	{ "Id": 2 "parentId": 1, "name": "Owoce"},
	{ "Id": 3 "parentId": 1, "name": "Warzywa"},
	{ "Id": 4, "parentId": 2, "name": "jabłko"},
	{ "Id": 5, "parentId": 2, "name": "pomarańczowa"},
	{ "Id": 6 "parentId": 3, "name": "pomidor"},
	{ "Id": 7 "parentId": 3, "name": "marchewka"},
	{ "Id": 8 "parentId": 3, "name": "Kapusta"},
	{ "Id": 9 "parentId": 3, "name": "ziemniak"},
	{ "Id": 10, "parentId": 3, "name": "sałata"}
	]

Stosowanie "loadFilter 'Tworzenie drzewa menu (drzewo) 

	$ ( '# Tt "). Drzewo ({
		url: "dane / tree6_data.json"
		loadFilter: funkcyjne (wiersze) {
			powrót zagospodarowania (wiersze);
		}
	});

Realizacja konwersji 

	Funkcja konwersji (wiersze) {
		funkcja istnieje (wiersze, parentId) {
			for (var i = 0; i <rows.length; i ++) {
				if (wiersze [i] == .id parentId) return true;
			}
			return false;
		}
		
		węzły var = [];
		// Pobierz z najlepszymi na poziomie węzłów
		for (var i = 0; i <rows.length; i ++) {
			var row = wiersze [i];
			if (! istnieje (wiersze, row.parentId)) {
				nodes.push ({
					id: row.id,
					Tekst: row.name
				});
			}
		}
		
		var todo = [];
		for (var i = 0; i <nodes.length; i ++) {
			toDo.push (węzły [i]);
		}
		while (toDo.length) {
			var node = toDo.shift (); // węzeł nadrzędny
			// Get the Children węzłów
			for (var i = 0; i <rows.length; i ++) {
				var row = wiersze [i];
				if (row.parentId == node.id) {
					var dziecko = {id: row.id, tekst: row.name};
					if () {node.children
						node.children.push (dziecko);
					} Else {
						node.children = [dziecko];
					}
					toDo.push (dziecko);
				}
			}
		}
		powrót węzły;
	}

Pobierz przykłady jQuery EasyUI

jeasyui-tree-tree6.zip

Hot Tutorials

Contact US

jQuery EasyUI drzewa menu - menu Tree Dodaj Rodzic / węzły potomne
10/30