jQuery EasyUI siatki danych i drzewa widget - Drzewo Drzewo

polegać

• przeciągany
• droppable

zwyczaj

Drzewa (drzewo) jest określona w elemencie <ul>. Znacznik może być zdefiniowane węzły liści i węzły podrzędne. Węzeł jest <li> ul elementem listy. Poniżej pokazane zostanie wykorzystana do produkcji elementów zagnieżdżone w ul węzeł elementu drzewa.

<Ul id = class "tt" = "easyui-tree">
    <Li>
		<Span> Folder </ span>
		<Ul>
			<Li>
				<Span> Sub Folder 1 </ span>
				<Ul>
					<Li> <span> <a href="#"> File 11 </a> </ span> </ li>
					<Li> <span> Plik 12 </ span> </ li>
					<Li> <span> Plik 13 </ span> </ li>
				</ Ul>
			</ Li>
			<Li> <span> Plik 2 </ span> </ li>
			<Li> <span> Plik 3 </ span> </ li>
		</ Ul>
	</ Li>
    <Li> <span> File21 </ span> </ li>
</ Ul>

Drzewo (Tree) może być również zdefiniowane w pustym <ul> element, można użyć JavaScript do ładowania danych.

<Ul id = "tt"> </ ul>

$ ( '# Tt "). Drzewo ({
    url: 'tree_data.json'
});

Użyj loadFilter do obsługi danych JSON z usługi sieci web ASP.NET.

$ ( '# Tt "). Drzewo ({
    url: ...
    loadFilter: function (data) {
		if (data.d) {
			powrót data.d;
		} Else {
			zwrócić dane;
		}
    }
});

Format danych drzewo (Drzewo Dane Format)

Każdy węzeł może zawierać następujące atrybuty:

• ID: ID węzła, ważne jest, aby załadować dane zdalnych.
• tekst: tekst wyświetlany węzeł.
• Stan: stan węzłów, "otwarty" lub "zamknięty", domyślnie jest "otwarty". Po ustawieniu na "zamknięty", węzeł ma węzły potomne i załadować je z odległego miejsca.
• sprawdzić: Wskazuje, czy węzeł jest zaznaczona.
• atrybuty: węzeł dodać atrybuty niestandardowe.
• dzieci: definiuje tablicę węzłów węzłów potomnych.

Przykład:

[{
    "Id": 1,
    "Text": "Folder1"
    "IconCls": "icon-save",
    "Dzieci": [{
		"Text": "File1"
		"Sprawdzone": true
    }, {
		"text": "Książki",
		"Państwo": "otwarte",
		"Atrybuty": {
			"URL": "/ demo / książka / abc"
			"Cena": 100
		}
		"Dzieci": [{
			"Text": "PhotoShop"
			"Sprawdzone": true
		}, {
			"Id": 8,
			"Tekst": "Sub Bookds"
			"Państwo": "zamknięty"
		}]
    }]
}, {
    "Text": "Języki"
    "Państwo": "zamknięty",
    "Dzieci": [{
		"Tekst": "Java"
    }, {
		"Tekst": "C #"
    }]
}]

Asynchronous drzewo

Wbudowane wsparcie dla trybu ładowania drzewa asynchronicznym, dzięki czemu użytkownicy mogą utworzyć pusty drzewo, a następnie określ po stronie serwera dane dynamiczne zwroty JSON, w zależności od zapotrzebowania na asynchronicznie zaludnionych drzewa. Oto przykład:

<ul class = "easyui-tree" data-options = "url:" get_data.php ""> </ ul>

Drzewo URL 'get_data.php' załadowany. węzły potomne zależy od stanu Rodzic jest załadowany. Po rozwinięciu zamknięty węzeł, jeśli węzeł nie ma dzieci załadowany, to wyśle ​​do wartości ID węzła serwera http nazwie 'id' parametry żądania URL zdefiniowane powyżej, w celu odzyskania węzły potomne.

Spójrz na dane zwracane z serwera:

[{
    "Id": 1,
    "Tekst": "Node 1",
    "Państwo": "zamknięty",
    "Dzieci": [{
		"Id": 11,
		"Tekst": "Węzeł 11"
    }, {
		"Id": 12,
		"Tekst": "Węzeł 12"
    }]
}, {
    "Id": 2,
    "Tekst": "Node 2",
    "Państwo": "zamknięty"
}]

Węzły 1 i 2 są zamknięte, po rozwinięciu węzła zaprezentuje jej dziecko bezpośrednio z węzłami. Po rozwinięciu węzła 2, serwer wysyła wartość (2) w celu pobrania węzły potomne.

Ten poradnik do tworzenia asynchronicznego drzew pokazują, jak napisać kod do serwera w zależności od potrzeb, aby powrócić do danych drzew.

nieruchomość

$('#tt').tree({
	data: [{
		text: 'Item1',
		state: 'closed',
		children: [{
			text: 'Item11'
		},{
			text: 'Item12'
		}]
	},{
		text: 'Item2'
	}]
});

$('#tt').tree({
	formatter:function(node){
		return node.text;
	}
});

wydarzenie

Wiele wydarzeń wymagają funkcji zwrotnej parametry węzła '', które obejmują następujące właściwości:

• ID: związany z wartości identyfikatora węzła.
• tekst: tekst ma być wyświetlany.
• iconCls: wyświetlanie ikony klasę css.
• sprawdzić: czy węzeł jest zaznaczona.
• Stan: stan węzłów, "otwarty" lub "zamknięty".
• atrybuty: wiążą się zwyczajem węzeł atrybutu.
• target: DOM obiektów docelowych.

$('#tt').tree({
	onClick: function(node){
		alert(node.text);  // alert node text property when clicked
	}
});

// right click node and then display the context menu
$('#tt').tree({
	onContextMenu: function(e, node){
		e.preventDefault();
		// select the node
		$('#tt').tree('select', node.target);
		// display context menu
		$('#mm').menu('show', {
			left: e.pageX,
			top: e.pageY
		});
	}
});

// the context menu is defined as below:
<div id="mm" class="easyui-menu" style="width:120px;">
	<div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
	<div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
</div>

sposób

var nodes = $('#tt').tree('getChecked');	// get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked');	// get unchecked nodes
var nodes = $('#tt').tree('getChecked', 'indeterminate');	// get indeterminate nodes
var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']);	// get checked and indeterminate nodes

// find a node and then select it
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);

// append some nodes to the selected node
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
	parent: selected.target,
	data: [{
		id: 23,
		text: 'node23'
	},{
		text: 'node24',
		state: 'closed',
		children: [{
			text: 'node241'
		},{
			text: 'node242'
		}]
	}]
});

var node = $('#tt').tree('getSelected');
if (node){
	$('#tt').tree('insert', {
		before: node.target,
		data: {
			id: 21,
			text: 'node text'
		}
	});
}

// update the selected node text
var node = $('#tt').tree('getSelected');
if (node){
	$('#tt').tree('update', {
		target: node.target,
		text: 'new text'
	});
}