ztree如何使用json

大家好，今天我来给大家分享一篇关于ztree如何使用json的文章，ztree是一个非常好用的树形插件，它以灵活、小巧、功能强大著称，在众多前端开发中，使用ztree展示树形结构数据是一种常见的需求，而json作为数据传输的常用格式，与ztree的结合使用更是如虎添翼，下面我们就来详细了解一下如何使用json数据来驱动ztree。

我们需要在页面中引入ztree的CSS和JS文件，可以从ztree的官网或者GitHub上下载相关文件，在HTML文件中，添加以下代码：

Markup

<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>

创建一个div元素作为ztree的容器：

Markup

<div id="treeDemo" class="ztree"></div>

我们需要准备json数据，以下是一个简单的json数据示例：

[
    { "id":1, "pId":0, "name":"父节点1"},
    { "id":11, "pId":1, "name":"子节点1"},
    { "id":12, "pId":1, "name":"子节点2"}
]

ztree如何使用json

在这个例子中，id表示节点的唯一标识，pId表示父节点的id（根节点的pId为0），name表示节点显示的文本。

我们来编写javascript代码，初始化ztree：

JavaScript

$(document).ready(function(){
    var setting = {
        view: {
            showIcon: true //是否显示节点图标
        },
        data: {
            simpleData: {
                enable: true //使用简单数据模式
            }
        }
    };
    var zNodes = [
        { "id":1, "pId":0, "name":"父节点1"},
        { "id":11, "pId":1, "name":"子节点1"},
        { "id":12, "pId":1, "name":"子节点2"}
    ];
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

在上面的代码中，我们首先定义了一个setting对象，这个对象包含了ztree的配置信息，这里我们启用了简单数据模式（simpleData），这样就可以直接使用我们准备的json数据了。

我们定义了一个zNodes变量，将我们的json数据赋值给它，使用$.fn.zTree.init()方法初始化ztree，这个方法的第一个参数是ztree容器的选择器，第二个参数是配置信息，第三个参数是节点数据。

ztree如何使用json

至此，一个简单的ztree实例就创建完成了，我们来看看如何从服务器获取json数据并动态加载到ztree中。

我们可以使用ajax方法从服务器获取json数据：

JavaScript

$.ajax({
    url: 'server/getTreeData.php', //服务器地址
    type: 'POST', //请求方式
    dataType: 'json', //返回数据类型
    success: function(data) {
        //成功获取数据后，初始化ztree
        $.fn.zTree.init($("#treeDemo"), setting, data);
    },
    error: function(xhr, status, error) {
        //处理错误
        alert('获取数据失败！');
    }
});