jQuery EasyUI Datenraster und Baum-Widget - Baum

Verlassen Sie sich

• ziehbar
• abwerfbaren

Verwendung

Baum (Baum) ist in der <ul> Element definiert. Der Tag kann Blattknoten und Unterknoten definiert werden. Knoten ist <li> ul-Element in der Liste. Die folgenden Shows werden für die Herstellung von Elementen innerhalb des ul-Element Baumknoten verschachtelt verwendet werden.

<Ul id = "tt" class = "easyui-tree">
    <Li>
		<Span> Ordner </ span>
		<Ul>
			<Li>
				<Span> Unter Ordner 1 </ span>
				<Ul>
					<Li> <span> <a href="#"> Datei 11 </a> </ span> </ li>
					<Li> <span> Datei 12 </ span> </ li>
					<Li> <span> Datei 13 </ span> </ li>
				</ Ul>
			</ Li>
			<Li> <span> Datei 2 </ span> </ li>
			<Li> <span> Datei 3 </ span> </ li>
		</ Ul>
	</ Li>
    <Li> <span> File21 </ span> </ li>
</ Ul>

Baum (Baum) können auch in einem leeren <ul> Element definiert werden, können Sie Javascript verwenden, um Daten zu laden.

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

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

Verwenden Sie loadFilter zu json Daten von ASP.NET Web-Service handhaben.

$ ( '# Tt'). Baum ({
    url: ...,
    loadFilter: function (data) {
		if (data.d) {
			Rückkehr data.d;
		} Else {
			Rückkehr Daten;
		}
    }
});

Baum-Datenformat (Baum Data Format)

Jeder Knoten kann die folgenden Attribute enthalten:

• ID: Knoten-ID ist es wichtig, Remote-Daten zu laden.
• Text: Text angezeigt Knoten werden.
• Zustand: Knotenstatus, "offen" oder "geschlossen", der Standard ist "offen". Bei der Einstellung "geschlossen", hat der Knoten untergeordnete Knoten, und sie von einem entfernten Standort laden.
• geprüft: Gibt an, ob der Knoten ausgewählt ist.
• Attribute: ein Knoten benutzerdefinierte Attribute hinzuzufügen.
• Kinder: definiert die Anordnung von Knoten untergeordneten Knoten.

Beispiel:

[{
    "Id": 1,
    "Text": "Folder1",
    "IconCls": "Symbol-save",
    "Kinder": [{
		"Text": "File1",
		"Geprüft": true
    }, {
		"Text": "Bücher",
		"Staat": "offen",
		"Attribute": {
			"URL": "/ demo / book / abc",
			"Preis": 100
		},
		"Kinder": [{
			"Text": "PhotoShop",
			"Geprüft": true
		}, {
			"Id": 8,
			"Text": "Sub Bookds",
			"Staat": "geschlossen"
		}]
    }]
}, {
    "Text": "Sprachen",
    "Staat": "geschlossen",
    "Kinder": [{
		"Text": "Java"
    }, {
		"Text": "C #"
    }]
}]

Asynchrone Baum

Integrierte Unterstützung für asynchrone Laden Baum-Modus, so dass die Benutzer einen leeren Baum erstellen können, dann geben Sie eine serverseitige dynamische Renditen JSON-Daten, entsprechend der Nachfrage für asynchron besiedelten Baum. Hier ist ein Beispiel:

<Ul class = "easyui Baum" Daten-Optionen = "url: 'get_data.php'"> </ ul>

Baum von URL 'get_data.php' geladen. Child-Knoten ist abhängig von der übergeordnete Knoten Status geladen. Wenn Sie einen geschlossenen Knoten erweitern, wenn der Knoten keine Kinder geladen hat, wird es mit dem id-Wert des Server-Knotens als http namens 'id' URL-Parameter oben definiert, um senden und die untergeordneten Knoten abzurufen.

Schauen Sie sich die vom Server ausgegebene Daten:

[{
    "Id": 1,
    "Text": "Node 1" ist,
    "Staat": "geschlossen",
    "Kinder": [{
		"Id": 11,
		"Text": "Knoten 11"
    }, {
		"Id": 12,
		"Text": "Knoten 12"
    }]
}, {
    "Id": 2,
    "Text": "Node 2",
    "Staat": "geschlossen"
}]

Knoten 1 und 2 geschlossen sind, wenn Sie einen Knoten erweitern, präsentiert seine Kind direkt Knoten. Wenn Sie den Knoten 2 erweitern, wird der Server den Wert (2), um die untergeordneten Knoten abzurufen senden.

Dieses Tutorial eine asynchrone Bäume zu erstellen zeigen , wie Code auf den Server zu schreiben , entsprechend der Nachfrage der Baumdaten zurückzukehren.

Immobilien

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

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

Ereignis

Viele Ereignisse erfordern eine Callback-Funktion "Knoten" Parameter, die die folgenden Eigenschaften umfassen:

• ID: gebunden an den Identitätswert des Knotens.
• Text: Text angezeigt werden.
• iconCls: das Symbol CSS-Klasse angezeigt werden soll.
• geprüft: ob der Knoten ausgewählt ist.
• Zustand: Knotenstatus, "offen" oder "geschlossen".
• Attributknoten binden, um benutzerdefinierte: Attribute.
• Ziel: DOM-Objekte Ziele.

$('#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>

Weg

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'
	});
}