jquery ztree实现下拉树形框使用到了json数据

下面是jquery ztree实现下拉树形框使用到json数据的完整攻略及示例说明。

一、前置知识

在使用jquery ztree实现下拉树形框之前，需要对以下内容有一定的了解：

1. jQuery库的应用：了解jQuery库的基本语法和jQuery选择器的使用，以便能够正确地控制HTML元素。

2. Ztree插件的应用：了解ztree插件的基本用法和配置参数，以及ztree插件如何生成树形结构。

3. JSON数据格式：了解JSON数据格式的基本语法和数据结构，知道如何从后端获取JSON数据。

二、实现步骤

1. 引入必要的库和插件。

<link rel="stylesheet" href="http://cdn.staticfile.org/zTree.v3.5.37/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/zTree.v3.5.37/js/jquery.ztree.all.min.js"></script>

1. 创建下拉框和ztree树形结构，并指定它们的CSS样式。

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

1. 编写JS代码，通过AJAX请求后端获取JSON数据，将JSON数据转换成ztree所需的数据格式，并生成树形结构。

var setting = {
    view: {
        dblClickExpand: false
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onClick: onClick
    }
};

var zNodes = null;

$.ajax({
    type: "get",
    url: "data.json", // 后端返回的JSON数据接口
    dataType: "json",
    success: function(data) {
        zNodes = data; // 获取后端的JSON数据
        $.fn.zTree.init($("#treeDemo"), setting, zNodes); // 生成ztree树形结构
    }
});

function onClick(e, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    zTree.expandNode(treeNode);
}

三、示例说明

示例一

1. JSON数据格式

[{
    "id": 1,
    "name": "A",
    "parentId": 0,
    "children": [{
        "id": 11,
        "name": "A1",
        "parentId": 1
    }, {
        "id": 12,
        "name": "A2",
        "parentId": 1,
        "children": [{
            "id": 121,
            "name": "A21",
            "parentId": 12
        }]
    }]
}, {
    "id": 2,
    "name": "B",
    "parentId": 0,
    "children": [{
        "id": 21,
        "name": "B1",
        "parentId": 2
    }]
}]

1. HTML代码

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

1. JS代码

var setting = {
    view: {
        dblClickExpand: false
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onClick: onClick
    }
};

var zNodes = [{
    "id": 1,
    "name": "A",
    "parentId": 0,
    "children": [{
        "id": 11,
        "name": "A1",
        "parentId": 1
    }, {
        "id": 12,
        "name": "A2",
        "parentId": 1,
        "children": [{
            "id": 121,
            "name": "A21",
            "parentId": 12
        }]
    }]
}, {
    "id": 2,
    "name": "B",
    "parentId": 0,
    "children": [{
        "id": 21,
        "name": "B1",
        "parentId": 2
    }]
}];

$.fn.zTree.init($("#treeDemo"), setting, zNodes);

function onClick(e, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    zTree.expandNode(treeNode);
}

示例二

1. JSON数据格式

[{
    "value": "A",
    "children": [{
        "value": "A1"
    }, {
        "value": "A2",
        "children": [{
            "value": "A21"
        }]
    }]
}, {
    "value": "B",
    "children": [{
        "value": "B1"
    }]
}]

1. HTML代码

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

1. JS代码

var setting = {
    view: {
        dblClickExpand: false
    },
    data: {
        simpleData: {
            enable: true,
            idKey: "value",
            pIdKey: "parentId",
            rootPid: ""
        }
    },
    callback: {
        onClick: onClick
    }
};

var zNodes = [{
    "value": "A",
    "children": [{
        "value": "A1"
    }, {
        "value": "A2",
        "children": [{
            "value": "A21"
        }]
    }]
}, {
    "value": "B",
    "children": [{
        "value": "B1"
    }]
}];

$.fn.zTree.init($("#treeDemo"), setting, zNodes);

function onClick(e, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    zTree.expandNode(treeNode);
}

以上就是jquery ztree实现下拉树形框使用到json数据的完整攻略及示例说明。