1. Rumah
  2. menu pohon jQuery EasyUI - pohon lazy loading node jaringan

Tutorial menu pohon jQuery EasyUI - pohon lazy loading node jaringan Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari Ambil jQuery EasyUI contoh,

menu pohon jQuery EasyUI - pohon lazy loading node jaringan

Kadang-kadang kita telah sepenuhnya hirarkis pohon grid (TreeGrid) data. Kami juga ingin grid pohon (TreeGrid) hirarkis lazy loading simpul. Pertama, hanya memuat simpul atas. Klik pada icon dan kemudian memperluas node untuk memuat node anaknya. Tutorial ini menunjukkan Anda bagaimana untuk membuat pohon dengan grid beban lembam Karakteristik (TreeGrid).

Buat jaringan pohon (TreeGrid) 

	<Table id = "test" title = "Folder Browser" class = "easyui-treegrid" style = "width: 700px; height: 300px"
			Data-opsi = "
				url: 'data / treegrid_data.json',
				Metode: 'mendapatkan',
				rownumbers: benar,
				idfield: 'id',
				treeField: 'nama',
				loadFilter: myLoadFilter
			">
		<Thead>
			<Tr>
				<Th field = "nama" width = "220"> Nama </ th>
				<Bidang Th = "size" width = "100" align = "right"> Ukuran </ th>
				<Th field = "date" width = "150"> Modified Tanggal </ th>
			</ Tr>
		</ Thead>
	</ Table>

Untuk menempatkan node anak beban, setiap node kita perlu mengubah nama properti 'anak'. Seperti ditunjukkan dalam kode berikut, 'anak-anak' properti Rename 'children1'. Ketika Anda memperluas node, kita sebut metode 'append' untuk memuat data node anaknya.

'LoadFilter' Kode 

	Fungsi myLoadFilter (data, ParentID) {
		Fungsi setData () {
			var todo = [];
			for (var i = 0; i <data.length; i ++) {
				todo.push (data [i]);
			}
			sementara (todo.length) {
				var simpul = todo.shift ();
				jika (node.children) {
					node.state = 'ditutup';
					node.children1 = node.children;
					node.children = tidak terdefinisi;
					todo = todo.concat (node.children1);
				}
			}
		}
		
		setData (data);
		var tg = $ (ini);
		var opts = tg.treegrid ( 'Pilihan');
		opts.onBeforeExpand = function (baris) {
			jika (row.children1) {
				tg.treegrid ( 'menambahkan', {
					orang tua: row [opts.idField],
					Data: row.children1
				});
				row.children1 = tidak terdefinisi;
				tg.treegrid ( 'memperluas', baris [opts.idField]);
			}
			pulang row.children1 == terdefinisi;
		};
		kembali data;
	}

Ambil jQuery EasyUI contoh

jeasyui-tree-treegrid5.zip

Tutorial Panas

Hubungi kami

menu pohon jQuery EasyUI - pohon lazy loading node jaringan
10/30