jQuery EasyUI menu pohon - menu Pohon untuk menambahkan node
Tutorial ini menunjukkan kepada Anda bagaimana untuk melampirkan node ke menu tree (pohon). Kami akan membuat simpul pohon makanan yang mengandung buah-buahan dan sayuran, dan kemudian menambahkan beberapa buah lainnya ke node buah yang ada.
Buat pohon makanan
Pertama, kita membuat pohon makanan, kode tersebut adalah sebagai berikut:
<Style Div = "width: 200px; height: auto; border: 1px # ccc padat;"> <Ul id = kelas "tt" = "easyui-pohon" url = "tree_data.json"> </ ul> </ Div>
Harap dicatat bahwa pohon (pohon) komponen didefinisikan dalam <ul> tag, Data simpul pohon diambil dari URL "tree_data.json".
Dapatkan node parent
Kemudian kita memilih buah simpul dengan mengklik node, kita akan menambahkan beberapa data buah lainnya. Executive getSelected diperoleh pengolahan simpul:
var simpul = $ ( '# tt') pohon ( 'getSelected') .;
Hasil pulang Metode getSelected adalah objek javascript yang memiliki id, teks, menargetkan properti. properti target adalah referensi DOM objek simpul yang dipilih, metode append yang akan digunakan untuk node anak tambahan.
node tambahan
var simpul = $ ( '# tt') pohon ( 'getSelected') .; jika (node) { var node = [{ "Id": 13, "Teks": "Raspberry" }, { "Id": 14, "Teks": "Cantaloupe" }]; $ ( '# Tt'). Pohon ( 'append', { orang tua: node.target, Data: node }); }
Ketika Anda menambahkan beberapa buah, Anda akan melihat:
Seperti yang Anda lihat, menggunakan pohon easyui (Pohon) plug-in untuk node tambahan tidak begitu sulit.