1

私はこの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データを入力したいと思います。チャイルドはデータベースからの行である必要があります。テーブル データを json_encoded すると、次のようになります。

[Object { article_id=

"4949"

,  article_name_internal=

"Nachtlampe Lumilove Barbapapa"

}, Object { article_id=

"4947"

,  article_name_internal=

"Wanduhr Silk von Koziol"

},

子の 1 つをクリックすると、そのページに移動する必要があります。このデータをツリーに入力する方法がわかりません。何か指示はありますか？

4

1 に答える 1

1

jsTree の各ノードには、設定できる属性のリストがあります。JSON でプロパティを使用し、attr必要なデータを表すプロパティと値のペアの配列を追加するだけです。

これらのプロパティの 1 つは、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"]

    });
于 2013-01-31T06:34:21.947 に答える