1. Home
  2. jQuery EasyUI menu drzewa - drzewo lazy loading węzły siatki

Najlepszy samouczek jQuery EasyUI menu drzewa - drzewo lazy loading węzły siatki W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

jQuery EasyUI menu drzewa - drzewo lazy loading węzły siatki

Czasami byliśmy pełni hierarchiczne drzewo siatka (TreeGrid) danych. Chcemy również siatkę drzewa (TreeGrid) hierarchiczny węzła załadunku leniwy. Po pierwsze, należy załadować tylko górny węzeł. Kliknij na ikonę, a następnie rozwiń węzeł, aby załadować swoje węzły potomne. Ten poradnik pokazuje, jak stworzyć drzewo z siatki Charakterystyka obojętne obciążenia (TreeGrid).

Tworzenie drzewa siatkę (TreeGrid) 

	<Table id = "test" title = "Przeglądarka Folder" class = "easyui-TreeGrid" style = "width: 700px; height: 300px"
			data-options = "
				url: "dane / treegrid_data.json"
				Metoda: 'get',
				rownumbers: prawda,
				idField: 'id',
				treeField: "nazwa",
				loadFilter: myLoadFilter
			">
		<THEAD>
			<Tr>
				<Th pole = "name" width = "220"> Nazwa </ th>
				<Pole Th = "size" width = "100" align = "right"> Rozmiar </ th>
				<Th pole = "date" width = "150"> Data modyfikacji </ th>
			</ Tr>
		</ THEAD>
	</ Table>

Aby umieścić węzły potomne obciążenia, każdy węzeł, musimy zmienić nazwę właściwość "dzieci". Jak pokazano w poniższym kodzie, zmiana nazwy Nieruchomość 'dzieci' 'dzieci1 ". Po rozwinięciu węzła nazywamy "append" metody, aby załadować swoje dane węzły potomne.

Kod "LoadFilter ' 

	Funkcja myLoadFilter (dane, parentId) {
		Funkcja SetData () {
			var todo = [];
			for (var i = 0; i <data.length; i ++) {
				todo.push (dane [i]);
			}
			while (todo.length) {
				var node = todo.shift ();
				if () {node.children
					node.state = "zamknięty";
					node.children1 = node.children;
					node.children = nieokreślone;
					todo = todo.concat (node.children1);
				}
			}
		}
		
		SetData (dane);
		var tg = $ (this);
		var zdecyduje = tg.treegrid ( "Opcje");
		opts.onBeforeExpand = function (row) {
			if (row.children1) {
				tg.treegrid ( "dołączyć", {
					parent: row [opts.idField]
					Dane: row.children1
				});
				row.children1 = nieokreślone;
				tg.treegrid ( "rozszerzenie", wiersz [opts.idField]);
			}
			Zwrot row.children1 == nieokreślone;
		};
		zwrócić dane;
	}

Pobierz przykłady jQuery EasyUI

jeasyui-tree-treegrid5.zip

Hot Tutorials

Contact US

jQuery EasyUI menu drzewa - drzewo lazy loading węzły siatki
10/30