json - 用 JSON 字符串填充的 jsTree

Question

我得到了这个jsTree：

$(function () {
    $("#tree").jstree({
        "json_data" : {
            "data" : [
                {
                    "data" : "<?php echo $db_obj->getValue('article_group_name') ?>",
                    "metadata" : { id : 23 },
                    "children" : [ "Child 1", "A Child 2" ]
                }
            ]
        },
        "plugins" : ["themes","json_data", "ui" ]
    });
});

我想用数据库数据填充它。Childs 应该来自数据库。我 json_encoded 表数据，它看起来像这样：

[Object { article_id=

"4949"

,  article_name_internal=

"Nachtlampe Lumilove Barbapapa"

}, Object { article_id=

"4947"

,  article_name_internal=

"Wanduhr Silk von Koziol"

},

当我单击其中一个孩子时，它应该转到该页面。不知道如何用这些数据填充树。有什么指示吗？

Answer 1

jsTree 的每个节点都有一个可以设置的属性列表。只需attr在 JSON 中使用该属性并添加一组表示您想要的数据的属性值对。

href一旦有人单击您的 jsTree 的节点，这些属性之一应该是包含您想要打开的页面的 URL。

现在你的服务器应该像这样返回数据。

{
    "data": "Root",
    "attr": {
        "id": "1",
        "rel": "Root",
        "type": 0
    },
    "children": [{
        "data": "Test 1",
        "attr": {
            "id": "2",
            "href": "http://www.google.com"
            "rel": "OrganizationalUnit",
            "type": 1
        },
        "children": [],
        "state": "open"
    }],
    "state": "open"
}

并且您的 JSTree inint 函数应该执行以下操作：

k_OrgTree = $("#OrgTree").jstree({
        json_data: {
            ajax: {
                url: "/Administration/PopulateTree",
                type: "POST",
                dataType: "json",
                contentType: "application/json charset=utf-8",
                success: function (data) { }
            }
        },
        themes: currentTheme,
        types: {
            valid_children: [k_Root],
            types: {
                Root: {
                    valid_children: [k_OrganizationalUnit, k_Calendar],
                    icon: { image: "/Content/Administration/Images/Root/Root_32x32.png" },
                    delete_node: false,
                },
                OrganizationalUnit: {
                    valid_children: [k_OrganizationalUnit, k_Calendar, k_User],
                    icon: { image: "/Content/Administration/Images/OrganizationalUnit/OrganizationalUnit_32x32.png" },
                },
                Calendar: {
                    valid_children: ["none"],
                    icon: { image: "/Content/Administration/Images/Calendar/Calendar_32x32.png" },
                    create_node: false
                },
                User: {
                    valid_children: ["none"],
                    icon: { image: "/Content/Administration/Images/User/User_32x32.png" },
                    create_node: false
                }
            }
        },

        plugins: ["themes", "json_data", "types", "ui"]

    });