Bagaimana untuk menggunakan jquery ztree
JQuery zTree ialah kawalan pokok berdasarkan JQuery Ia mudah digunakan, fleksibel, cekap dan sangat serasi Ia adalah salah satu alat yang sangat diperlukan dalam pembangunan web. Artikel ini akan memperkenalkan anda kepada tutorial penggunaan jQuery zTree secara terperinci, termasuk pemasangan, permulaan, konfigurasi, acara, dll., untuk membantu anda menggunakan alat berkuasa ini dengan lebih baik.
1. Pemasangan
Untuk menggunakan kawalan jQuery zTree, anda perlu memperkenalkan fail JS dan CSS yang sepadan. Versi terkini fail boleh dimuat turun dari tapak web rasmi zTree (http://www.ztree.me) atau diperoleh daripada beberapa CDN yang biasa digunakan (seperti https://cdn.bootcss.com). Berikut ialah kod untuk mengimport fail CSS dan JS:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>zTree Demo</title> <link rel="stylesheet" href="https://cdn.bootcss.com/zTree.v3.5.35/zTreeStyle/zTreeStyle.min.css"> </head> <body> <!--页面内容--> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/zTree.v3.5.35/jquery.ztree.all.min.js"></script> <script> //JS代码 </script> </body> </html>
2 Permulaan
Apabila fail berjaya diimport, anda boleh mula menggunakan kawalan zTree. Memulakan kawalan zTree memerlukan memanggil fungsi zTree dan menghantar beberapa parameter untuk mengkonfigurasi sifat kawalan, seperti kod berikut:
$(document).ready(function(){
var setting = {
data: {
simpleData: {
enable: true
}
}
};
var zNodes = [
{ id:1, pId:0, name:"节点1" },
{ id:2, pId:0, name:"节点2" }
];
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});Kod di atas melaksanakan menu pokok mudah, di mana $( document).ready( ) bermakna kod permulaan dilaksanakan hanya selepas halaman dimuatkan. tetapan mengandungi maklumat konfigurasi kawalan zTree, termasuk format data, gaya, acara, dsb. zNodes ialah tatasusunan yang menyimpan sumber data menu pokok. Semasa pemulaan, kawalan zTree dimulakan melalui kaedah $.fn.zTree.init() $() mewakili pemilih JQuery, yang boleh memilih elemen berdasarkan ID, kelas, label, dsb.
3. Konfigurasi
Pembolehubah tetapan dalam kod di atas ialah teras mengkonfigurasi kawalan zTree, dan sifat yang berbeza boleh ditetapkan mengikut keperluan. Berikut ialah beberapa item konfigurasi biasa:
- data
data ialah item konfigurasi dalaman yang digunakan untuk mengkonfigurasi format data menu pepohon. Berikut ialah format data ringkas:
var zNodes = [
{
name: "节点1",
children: [
{ name: "节点1.1" },
{ name: "节点1.2" }
]
},
{
name: "节点2",
children: [
{ name: "节点2.1" }
]
}
];Antaranya, setiap nod boleh mengandungi atribut seperti nama (nama nod) dan kanak-kanak (nod anak).
- semak
semak ialah item konfigurasi dalaman yang digunakan untuk mengkonfigurasi fungsi kotak semak menu pokok. Anda boleh menetapkan check.enable untuk mendayakan fungsi kotak semak dan check.chkboxType untuk menetapkan jenis kotak semak:
var setting = {
check: {
enable: true,
chkboxType: { "Y": "", "N": "" }
}
};di mana nilai chkboxType boleh { "Y" : "s", " N" : "s" } bermaksud semua nod mempunyai kotak semak (hanya nod induk), { "Y" : "ps", "N" : "ps" } bermaksud hanya nod bukan daun yang mempunyai kotak semak, { " Y" : "ps", "N" : "p" } bermakna hanya nod bukan daun dan nod daun peringkat terakhir mempunyai kotak semak.
- panggilan balik
panggilan balik ialah item konfigurasi dalaman yang digunakan untuk mengkonfigurasi acara menu pepohon. Anda boleh menetapkan onClick, onDblClick, onCheck dan acara lain:
var setting = {
callback: {
onClick: function(event, treeId, treeNode) {
alert(treeNode.name);
},
onDblClick: function(event, treeId, treeNode) {
alert(treeNode.name + " - 双击事件");
},
onCheck: function(event, treeId, treeNode) {
alert(treeNode.name + " - " + (treeNode.checked ? "选中" : "取消选中"));
}
}
};Antaranya, acara onClick dicetuskan apabila nod diklik, onDblClick dicetuskan apabila nod diklik dua kali dan onCheck dicetuskan apabila kotak semak nod dipilih atau dinyahtandai.
- view
view ialah item konfigurasi dalaman yang digunakan untuk mengkonfigurasi gaya menu pepohon. Anda boleh menetapkan fontCss, showIcon dan gaya lain:
var setting = {
view: {
fontCss: { "font-weight": "bold", "color": "#055" },
showIcon: false
}
};Antaranya, fontCss digunakan untuk menetapkan gaya fon dan showIcon menetapkan sama ada untuk memaparkan ikon.
4. Acara
Selain menetapkan acara dalam konfigurasi, kawalan zTree juga mempunyai beberapa fungsi acara terbina dalam. Contohnya, zTreeOnClick, zTreeOnCheck, dsb. digunakan untuk mengikat peristiwa klik nod dan acara pemilihan kotak semak Penggunaannya adalah serupa dengan yang berikut:
$(document).ready(function(){
var setting = {
callback: {
onClick: zTreeOnClick,
onCheck: zTreeOnCheck
}
};
var zNodes = [
{ id:1, pId:0, name:"节点1" },
{ id:2, pId:0, name:"节点2" }
];
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
function zTreeOnClick(event, treeId, treeNode) {
alert(treeNode.name);
}
function zTreeOnCheck(event, treeId, treeNode) {
alert(treeNode.name + " - " + (treeNode.checked ? "选中" : "取消选中"));
}Dalam kod di atas, zTreeOnClick dan zTreeOnCheck ialah acara tersuai. Label menggunakan fungsi panggil balik untuk mengikat acara klik nod dan acara pemilihan kotak.
5. Ringkasan
Melalui pengenalan di atas, saya percaya pembaca telah memahami penggunaan asas jQuery zTree, termasuk pemasangan, permulaan, konfigurasi, acara, dll. Dalam pembangunan sebenar, anda boleh mengkonfigurasi pelbagai sifat seperti yang diperlukan untuk mencapai fungsi yang lebih kaya. Pada masa yang sama, ia juga harus diperhatikan bahawa walaupun kawalan zTree itu sendiri berkuasa, ia juga mempunyai beberapa kelemahan, seperti isu prestasi, yang perlu dikendalikan secara munasabah semasa proses pembangunan sebenar.
Atas ialah kandungan terperinci Bagaimana untuk menggunakan jquery ztree. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?
Mar 19, 2025 pm 03:58 PM
Artikel ini membincangkan useeffect dalam React, cangkuk untuk menguruskan kesan sampingan seperti pengambilan data dan manipulasi DOM dalam komponen berfungsi. Ia menerangkan penggunaan, kesan sampingan yang biasa, dan pembersihan untuk mencegah masalah seperti kebocoran memori.
Bagaimanakah algoritma Rekonsiliasi React berfungsi?
Mar 18, 2025 pm 01:58 PM
Artikel ini menerangkan algoritma perdamaian React, yang dengan cekap mengemas kini DOM dengan membandingkan pokok DOM maya. Ia membincangkan manfaat prestasi, teknik pengoptimuman, dan kesan terhadap pengalaman pengguna. Kira -kira: 159
Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula?
Mar 18, 2025 pm 01:44 PM
Fungsi pesanan yang lebih tinggi dalam JavaScript meningkatkan ketabahan kod, kebolehgunaan semula, modulariti, dan prestasi melalui abstraksi, corak umum, dan teknik pengoptimuman.
Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya?
Mar 18, 2025 pm 01:45 PM
Artikel ini membincangkan kari dalam JavaScript, teknik yang mengubah fungsi multi-argumen ke dalam urutan fungsi argumen tunggal. Ia meneroka pelaksanaan kari, faedah seperti aplikasi separa, dan kegunaan praktikal, meningkatkan kod baca
Bagaimana anda menyambungkan komponen React ke kedai Redux menggunakan Connect ()?
Mar 21, 2025 pm 06:23 PM
Artikel membincangkan penyambungan komponen reaksi ke kedai redux menggunakan Connect (), menerangkan MapStateToprops, MapdispatchToprops, dan kesan prestasi.
Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen?
Mar 19, 2025 pm 03:59 PM
Artikel ini menerangkan USEContext dalam React, yang memudahkan pengurusan negara dengan mengelakkan penggerudian prop. Ia membincangkan faedah seperti keadaan terpusat dan penambahbaikan prestasi melalui pengurangan semula yang dikurangkan.
Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara?
Mar 19, 2025 pm 04:10 PM
Artikel membincangkan menghalang tingkah laku lalai dalam pengendali acara menggunakan kaedah pencegahanDefault (), faedahnya seperti pengalaman pengguna yang dipertingkatkan, dan isu -isu yang berpotensi seperti kebimbangan aksesibiliti.
Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal?
Mar 19, 2025 pm 04:16 PM
Artikel ini membincangkan kelebihan dan kekurangan komponen terkawal dan tidak terkawal dalam React, yang memberi tumpuan kepada aspek seperti ramalan, prestasi, dan kes penggunaan. Ia menasihatkan faktor -faktor yang perlu dipertimbangkan ketika memilih di antara mereka.
