Bagaimana untuk menggunakan jquery ztree-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menggunakan jquery ztree

PHPz

Lepaskan： 2023-04-26 10:50:06

asal

719 orang telah melayarinya

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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 ? "选中" : "取消选中"));
        }
    }
};

Salin selepas log masuk

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

Salin selepas log masuk

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 ? "选中" : "取消选中"));
}

Salin selepas log masuk

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!