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" ]
    });
});

我想用DB数据填充它。 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的每个节点都有一个可以设置的属性列表。只需使用JSON中的attr属性，并添加一组表示所需数据的属性 - 值对。

其中一个属性应该是href，其中包含您有人点击jsTree节点后要打开的网页的网址。

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

{
    "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"]

    });

jsTree填充了JSON字符串

1 个答案: