用 JSON 字符串填充的 jsTree答案

【问题标题】：jsTree populated with JSON string用 JSON 字符串填充的 jsTree
【发布时间】：2015-12-07 10:52:47
【问题描述】：

我得到了这个 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"

},

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

【问题讨论】：

标签： json jstree

【解决方案1】：

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

其中一个属性应该是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"]

    });

【讨论】：