CODEWITHSUNDEEP
jsonjstree
Barta Tamás
Barta Tamás

Reputation: 899

jsTree populated with JSON string

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

I would like to populate it with DB data. The Childs should be line from the database. I json_encoded the table data, it looks something like this:

[Object { article_id=

"4949"

,  article_name_internal=

"Nachtlampe Lumilove Barbapapa"

}, Object { article_id=

"4947"

,  article_name_internal=

"Wanduhr Silk von Koziol"

},

Whene i click one of the childs it should go to that page. Not sure how i can populate the tree with this data. Any instructions?

Upvotes: 1

Views: 2163

Answers (1)

Mortalus
Mortalus

Reputation: 10712

Each node for jsTree have a list of attributes that you can set to it. just use the attr property in your JSON and add an array of property-value pairs that represent the data you want.

one of these properties should be an href containing the URL for the page you want to opent once someone clicks the node for your jsTree.

now your server should return the data like this.

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

and your JSTree inint function should do something like that:

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

    });

Upvotes: 1

Related Questions