How to use jquery ztree-Front-end Q&A-php.cn

How to use jquery ztree

PHPz

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

Original

719 people have browsed it

JQuery zTree is a tree control based on JQuery. It is easy to use, flexible, efficient, and highly compatible. It is one of the indispensable tools in Web development. This article will introduce you to the usage tutorial of jQuery zTree in detail, including installation, initialization, configuration, events, etc., to help you better use this powerful tool.

1. Installation

To use the jQuery zTree control, you first need to introduce the corresponding JS and CSS files. The latest version of the file can be downloaded from zTree's official website (http://www.ztree.me) or obtained from some commonly used CDNs (such as https://cdn.bootcss.com). The following is the code for importing CSS and JS files:

<!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>

Copy after login

2. Initialization

When the files are successfully introduced, you can start using the zTree control. Initializing the zTree control requires calling the zTree function and passing in some parameters to configure the properties of the control, such as the following code:

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

Copy after login

The above code implements a simple tree menu, in which $(document).ready() means The initialization code is executed only after the page is loaded. setting contains the configuration information of the zTree control, including data format, style, events, etc.; zNodes is an array that stores the data source of the tree menu. During initialization, the zTree control is initialized through the $.fn.zTree.init() method. $() represents the JQuery selector, which can select elements based on ID, class, label, etc.

3. Configuration

The setting variable in the above code is the core of configuring the zTree control, and different properties can be set as needed. The following are some common configuration items:

data

data is an internal configuration item used to configure the data format of the tree menu. The following is a simple data format:

var zNodes = [
    {
        name: "节点1",
        children: [
            { name: "节点1.1" },
            { name: "节点1.2" }
        ]
    },
    {
        name: "节点2",
        children: [
            { name: "节点2.1" }
        ]
    }
];

Copy after login

Among them, each node can contain attributes such as name (node name), children (child nodes), etc.

check

check is an internal configuration item used to configure the check box function of the tree menu. You can set check.enable to enable the check box function, and check.chkboxType to set the check box type:

var setting = {
    check: {
        enable: true,
        chkboxType: { "Y": "", "N": "" }
    }
};

Copy after login

The value of chkboxType can be { "Y" : "s", "N" : " s" } means that all nodes have check boxes (only parent nodes), { "Y" : "ps", "N" : "ps" } means that only non-leaf nodes have check boxes, { "Y" : "ps", "N" : "p" } Indicates that only non-leaf nodes and the last level leaf node have check boxes.

callback

callback is an internal configuration item used to configure tree menu events. You can set onClick, onDblClick, onCheck and other events:

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

Copy after login

Among them, the onClick event is triggered when the node is clicked, onDblClick is triggered when the node is double-clicked, and onCheck is triggered when the node check box is selected or unchecked.

view

view is an internal configuration item used to configure the style of the tree menu. You can set fontCss, showIcon and other styles:

var setting = {
    view: {
        fontCss: { "font-weight": "bold", "color": "#055" },
        showIcon: false
    }
};

Copy after login

Among them, fontCss is used to set the font style, and showIcon is used to set whether to display the icon.

4. Events

In addition to setting events in the configuration, the zTree control also has some built-in event functions. For example, zTreeOnClick, zTreeOnCheck, etc. are used to bind node click events and check box selection events. The usage is similar to the following:

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

Copy after login

In the above code, zTreeOnClick and zTreeOnCheck are custom event functions, in the tag Bind node click events and check box selection events through callback functions.

5. Summary

Through the above introduction, I believe readers have understood the basic usage of jQuery zTree, including installation, initialization, configuration, events, etc. In actual development, you can configure various properties as needed to achieve richer functions. At the same time, it should also be noted that although the zTree control itself is powerful, it also has some shortcomings, such as performance issues, which need to be properly handled during the actual development process.

The above is the detailed content of How to use jquery ztree. For more information, please follow other related articles on the PHP Chinese website!