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