jQuery EasyUI data grid dan widget pohon - pohon Pohon

mengandalkan

• draggable
• droppable

pemakaian

Pohon (tree) didefinisikan dalam <ul> elemen. tag dapat didefinisikan node daun dan sub-node. Node adalah <li> elemen ul dalam daftar. Menunjukkan berikut akan digunakan untuk produksi elemen bersarang dalam ul simpul pohon elemen.

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

Pohon (tree) juga dapat didefinisikan dalam kosong <ul> elemen, Anda dapat menggunakan javascript untuk memuat data.

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

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

Gunakan loadFilter untuk menangani data json dari layanan web ASP.NET.

$ ( '# Tt'). Pohon ({
    url: ...,
    loadFilter: function (data) {
		jika (data.d) {
			kembali data.d;
		} Lain {
			kembali data;
		}
    }
});

format pohon data (pohon Format Data)

Setiap node dapat mencakup atribut berikut:

• id: simpul id, penting untuk memuat data remote.
• teks: teks yang akan ditampilkan simpul.
• negara: Status simpul, 'terbuka' atau 'tertutup', defaultnya adalah 'terbuka'. Bila diatur ke 'tertutup', node memiliki node anak, dan beban mereka dari situs remote.
• diperiksa: Menunjukkan apakah node yang dipilih.
• atribut: node untuk menambahkan atribut khusus.
• anak: mendefinisikan array node node anak.

contoh:

[{
    "Id": 1,
    "Teks": "Folder1",
    "IconCls": "icon-save",
    "Anak-anak": [{
		"Teks": "File1",
		"Diperiksa": true
    }, {
		"Teks": "Buku",
		"Negara": "terbuka",
		"Atribut": {
			"Url": "/ demo / buku / abc",
			"Harga": 100
		},
		"Anak-anak": [{
			"Teks": "PhotoShop",
			"Diperiksa": true
		}, {
			"Id": 8,
			"Teks": "Sub Bookds",
			"Negara": "tertutup"
		}]
    }]
}, {
    "Teks": "Bahasa",
    "Negara": "tertutup",
    "Anak-anak": [{
		"Teks": "Java"
    }, {
		"Teks": "C #"
    }]
}]

pohon asynchronous

Built-in dukungan untuk modus pembebanan pohon asynchronous, sehingga pengguna dapat membuat pohon kosong, kemudian tentukan server-side data yang kembali dinamis JSON, sesuai dengan permintaan untuk pohon asynchronous dihuni. Berikut adalah contoh:

<Ul class = "easyui-pohon" Data-opsi = "url: 'get_data.php'"> </ ul>

Tree oleh URL 'get_data.php' dimuat. node anak tergantung pada status orangtua simpul dimuat. Ketika Anda memperluas node tertutup, jika node tidak memiliki anak dimuat, ia akan mengirim ke nilai id dari node server sebagai http bernama 'id' parameter permintaan URL yang didefinisikan di atas, dalam rangka untuk mengambil node anak.

Lihatlah data yang dikembalikan dari server:

[{
    "Id": 1,
    "Teks": "Node 1",
    "Negara": "tertutup",
    "Anak-anak": [{
		"Id": 11,
		"Teks": "Node 11"
    }, {
		"Id": 12,
		"Teks": "Node 12"
    }]
}, {
    "Id": 2,
    "Teks": "Node 2",
    "Negara": "tertutup"
}]

Node 1 dan 2 ditutup, ketika Anda memperluas node, akan menampilkan anaknya node secara langsung. Ketika Anda memperluas node 2, server akan mengirimkan nilai (2) untuk mengambil node anak.

Tutorial ini untuk membuat pohon asynchronous menunjukkan bagaimana menulis kode untuk server sesuai dengan permintaan untuk mengembalikan data pohon.

milik

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

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

peristiwa

Banyak kejadian membutuhkan fungsi callback parameter 'simpul', yang meliputi sifat-sifat berikut:

• id: terikat dengan nilai identitas node.
• teks: teks yang akan ditampilkan.
• iconCls: untuk menampilkan kelas icon css.
• memeriksa: apakah node yang dipilih.
• negara: Status simpul, 'terbuka' atau 'tertutup'.
• atribut: mengikat kustom atribut simpul.
• Target: DOM objek target.

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

cara

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