Jquery树插件zTree用法入门教程

下面就是关于“Jquery树插件zTree用法入门教程”的完整攻略。

一、什么是zTree？

zTree是一款基于jQuery开发的树形菜单插件，提供了强大的树形菜单功能和灵活的配置选项。它的主要特点有：

支持异步加载节点数据，提高性能
提供多种选择模式（复选框、单选框、拖拽选中等）
支持自定义图标
提供简单的数据操作 API
提供灵活的事件回调
支持多语言

在本文中，我们将介绍如何使用zTree插件来构建树形菜单，并说明其基本用法和配置。

二、使用前准备

在使用zTree插件之前，我们需要先引入如下的依赖：

<!-- 引入jQuery库 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<!-- 引入zTree插件文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css" />
<script src="https://cdn.bootcss.com/zTree.v3/3.5.29/js/jquery.ztree.all.min.js"></script>

三、基本用法

1. 初始化zTree

要使用zTree插件，首先需要先在HTML中定义一个空的<ul>元素，然后在JavaScript代码中使用$.fn.zTree.init()方法来初始化zTree实例：

<ul id="tree"></ul>

$(document).ready(function(){
    var setting = {};
    var zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
});

其中：

#tree为HTML中定义的空<ul>元素的id。
setting参数为zTree插件的配置项，下面会详细介绍。
zNodes参数为树形菜单的数据源，类型为Array，下面会有示例说明。

2. zTree配置项

zTree插件提供了丰富的配置项，我们可以根据自己的需要来进行配置。下面是一些常用的配置项：

配置项	类型	描述
`data`	`Object`	树形菜单的数据源。
`async`	`Object`	异步加载节点数据的相关配置。
`check`	`Object`	复选框选中状态的相关配置。
`callback`	`Object`	回调函数的相关配置。
`view`	`Object`	树形菜单的样式和行为相关配置。
`edit`	`Object`	拖拽节点和修改节点名称的相关配置。
`simpleData`	`Object`	简单数据格式的相关配置。
`key`	`Object`	树形菜单结点数据的名称和连接线的样式。
`animation`	`Object`	动态效果的相关配置，如展开/折叠和刷新节点时的动画效果。

下面是一个配置示例：

var setting = {
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pid",
            rootPId: 0
        }
    },
    callback: {
        onClick: function(event, treeId, treeNode) {
            console.log(treeNode.name);
        }
    }
};

3. zTree数据源

zTree插件支持两种数据格式：标准JSON格式和简单JSON格式。下面是一个标准JSON格式的树形菜单数据源：

var zNodes = [{
    id: 1,
    pId: 0,
    name: "父节点1",
    open: true
}, {
    id: 11,
    pId: 1,
    name: "子节点11"
}, {
    id: 12,
    pId: 1,
    name: "子节点12"
}, {
    id: 2,
    pId: 0,
    name: "父节点2",
    open: true
}, {
    id: 21,
    pId: 2,
    name: "子节点21"
}, {
    id: 22,
    pId: 2,
    name: "子节点22"
}];

如果采用简单JSON格式，数据源只需要包含 id, pId, name 三个字段，例如：

var zNodes = [
    { id:1, pId:0, name:"父节点1", open:true },
    { id:11, pId:1, name:"子节点11" },
    { id:12, pId:1, name:"子节点12" },
    { id:2, pId:0, name:"父节点2", open:true },
    { id:21, pId:2, name:"子节点21" },
    { id:22, pId:2, name:"子节点22" }
];

4. zTree节点控制

通过节点控制，我们可以对树形菜单中的节点进行增、删、改、移动等操作。

添加节点

我们可以通过zTreeObj.addNodes()方法在树形菜单上添加新的节点。下面是一个添加节点的示例：

var newNode = { id: 3, pId: 0, name: "父节点3", open: true };
zTreeObj.addNodes(null, newNode);

其中：

null参数表示将要添加的节点是根节点，如果要添加到其他节点下面，需要传入该节点的Id。
newNode参数需要是一个JSON格式的对象。

删除节点

我们可以通过zTreeObj.removeNode()方法在树形菜单上删除节点。下面是一个删除节点的示例：

var node = zTreeObj.getNodeByParam("id", 11, null);
zTreeObj.removeNode(node);

其中：

getNodeByParam()方法用来获取要删除的节点，第二个参数是节点的id，第三个参数表示搜索的范围。
removeNode()方法删除指定的节点。

更新节点

我们可以通过zTreeObj.updateNode()方法在树形菜单上更新节点信息。下面是一个更新节点信息的示例：

var node = zTreeObj.getNodeByParam("id", 11, null);
node.name = "子节点1";
zTreeObj.updateNode(node);

其中：

getNodeByParam()方法用来获取需要更新的节点，第二个参数表示节点的id，第三个参数表示搜索的范围。
updateNode()方法用来更新节点信息，需要传入需要更新的节点对象。

5. 示例说明

示例一：构建简单的树形菜单

下面是一个最简单的树形菜单示例，使用了zTree的默认配置：

<ul id="tree"></ul>

var zNodes = [
    { id:1, pId:0, name:"父节点1", open:true },
    { id:11, pId:1, name:"子节点11" },
    { id:12, pId:1, name:"子节点12" },
    { id:2, pId:0, name:"父节点2", open:true },
    { id:21, pId:2, name:"子节点21" },
    { id:22, pId:2, name:"子节点22" }
];

$(document).ready(function(){
    var setting = {};
    var zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
});

示例二：使用节点控制实现增删改查

下面是一个使用节点控制实现增删改查的树形菜单示例：

<ul id="tree"></ul>
<button onclick="addNode()">{{新增节点}}</button>
<button onclick="deleteNode()">{{删除节点}}</button>
<button onclick="updateNode()">{{更新节点}}</button>
<button onclick="searchNode()">{{搜索节点}}</button>

var zNodes = [
    { id:1, pId:0, name:"父节点1", open:true },
    { id:11, pId:1, name:"子节点11" },
    { id:12, pId:1, name:"子节点12" },
    { id:2, pId:0, name:"父节点2", open:true },
    { id:21, pId:2, name:"子节点21" },
    { id:22, pId:2, name:"子节点22" }
];

$(document).ready(function(){
    var setting = {};
    var zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
});

function addNode() {
    var newNode = { id: 3, pId: 0, name: "父节点3", open: true };
    var zTreeObj = $.fn.zTree.getZTreeObj("tree");
    zTreeObj.addNodes(null, newNode);
}

function deleteNode() {
    var node = zTreeObj.getNodeByParam("id", 11, null);
    zTreeObj.removeNode(node);
}

function updateNode() {
    var node = zTreeObj.getNodeByParam("id", 11, null);
    node.name = "子节点1";
    zTreeObj.updateNode(node);
}

function searchNode() {
    var keyword = "父节点1";
    var nodes = zTreeObj.getNodesByParamFuzzy("name", keyword, null);
    if (nodes && nodes.length > 0) {
        zTreeObj.selectNode(nodes[0]);
    }
}

其中：

addNode()函数用来添加新的节点。
deleteNode()函数用来删除指定的节点。
updateNode()函数用来更新节点信息。
searchNode()函数用来搜索节点，并选中第一个匹配的节点。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jquery树插件zTree用法入门教程 - Python技术站