使用 JSON 填充 jstree答案

【问题标题】：Populating jstree with JSON使用 JSON 填充 jstree
【发布时间】：2013-12-18 10:02:21
【问题描述】：

我正在尝试填充 jstree。我整晚都在做这件事，但仍然一无所获。我的服务器上有一个名为display.php 的脚本。它产生这个响应文本：

[{
    "data": "Factory 1: (1-1000)",
    "state": "closed",
    "children": [{
        "data": 649
    }, {
        "data": 108
    }, {
        "data": 86
    }, {
        "data": 46
    }]
}, {
    "data": "Factory 2: (1001-2000)",
    "state": "closed",
    "children": {
        "data": "No child nodes"
    }
}, {
    "data": "Factory 3: (2001-3000)",
    "state": "closed",
    "children": [{
        "data": 2435
    }, {
        "data": 2951
    }, {
        "data": 2313
    }]
}, {
    "data": "Factory 4: (3001-4000)",
    "state": "closed",
    "children": [{
        "data": 3952
    }, {
        "data": 3722
    }, {
        "data": 3593
    }, {
        "data": 3252
    }, {
        "data": 3893
    }, {
        "data": 3854
    }, {
        "data": 3320
    }, {
        "data": 3092
    }]
}, {
    "data": "Factory 5: (4001-5000)",
    "state": "closed",
    "children": {
        "data": "No child nodes"
    }
}]

根据我能找到的所有文档（这很糟糕），这应该是一个可以传递给 jstree 对象的有效对象。请告诉我如何用这个 JSON 对象填充我的树。

编辑

这是我尝试调用 jstree 的方式：

$("#treeview").jstree({
    "json_data" : {
        "ajax" : {
        "url" : "libs/display.php"
        }
    }
    "plugins" : ["themes", "html_data", "ui", "crrm", "contextmenu", "json_data"], contextmenu: {items: customMenu, select_node: true}
});

【问题讨论】：

展示你如何使用 jsTree。
我会首先尝试通过使用静态 JSON 文件来排除 PHP 问题 - 更好的是，通过直接从 .js 文件中提供数据来排除 Ajax。
我调用 jstree 的函数应该如何做到这一点？我搜索了文档，但它只包含非常模糊的示例，目前没有一个可以帮助我满足我的特殊需求。
你用的是什么版本的jsTree？ php 脚本是否设置了正确的 json 内容标头？ (应用程序/json; charset=utf-8)

标签： javascript php jquery json jstree

【解决方案1】：

var loDatas = [];
$("#maintree").jstree({
    "core": {
        "themes": {
            "responsive": false
        },
        "check_callback": true,
        'data': loDatas
    },
    "types": {
        "default": {
            "icon": "fa fa-folder icon-state-warning icon-lg"
        },
        "file": {
            "icon": "fa fa-file icon-state-warning icon-lg"
        }
    },
    "state": { "key": "demo2" },
    "plugins": ["state", "types", "unique", "json_data", "search"]
});

var  lsTreeData = [{
                        "text": "Factory 1: (1-1000)",
                        "state": "closed",
                        "children": [{
                            "text": 649
                        }, {
                            "text": 108
                        }, {
                            "text": 86
                        }, {
                            "text": 46
                        }]
                    }, {
                        "text": "Factory 2: (1001-2000)",
                        "state": "closed",
                        "children": {
                            "text": "No child nodes"
                        }
                    }, {
                        "text": "Factory 3: (2001-3000)",
                        "state": "closed",
                        "children": [{
                            "text": 2435
                        }, {
                            "text": 2951
                        }, {
                            "text": 2313
                        }]
                    }, {
                        "text": "Factory 4: (3001-4000)",
                        "state": "closed",
                        "children": [{
                            "text": 3952
                        }, {
                            "text": 3722
                        }, {
                            "text": 3593
                        }, {
                            "text": 3252
                        }, {
                            "text": 3893
                        }, {
                            "text": 3854
                        }, {
                            "text": 3320
                        }, {
                            "text": 3092
                        }]
                    }, {
                        "text": "Factory 5: (4001-5000)",
                        "state": "closed",
                        "children": {
                            "text": "No child nodes"
                        }
                    }];

                    $('#maintree').jstree(true).settings.core.data = lsTreeData;
                    $('#maintree').jstree(true).refresh();
                    $("#maintree").jstree("open_all");
                    $("#maintree").jstree("deselect_all");

【讨论】：

将json数据字段改为文本字段。它会正常工作的。