Question

我正在尝试填充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}
});

Answer 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填充jstree

1 个答案: