Question

Can I somehow insert a table inside <li> when using

• jsTree (1.0) and
• json?

let’s say in this code where I want to insert table for

• both node and
• leaf.

Why? To display more things than only a name and using nice formatting.

                "data" : [
                    {
                        "data" : "A node",
                        "children" : [ "Child 1", "Child 2" ]
                    },
                    {
                        "attr" : { "id" : "li.node.id" },
                        "data" : {
                            "title" : "Long format demo",
                            "attr" : { "href" : "#" }
                 }
                    }
                ]

update:

it seems to me that I can use html_titles. But could somebody give me an example how to insert whole table and get cell data from variables?

Update2:

whether I use

"data" : "<table><tr><td>Site name</td><td>variable 1</td><td>variable 2</td></tr></table>", 

or

"title" : "<table><tr><td>Site name</td><td>variable 1</td><td>variable 2</td></tr></table",

the table is placed on a new line. Not next to the tree icon. Can I fix that somehow?

Answer 1

Expanding on the original post to help others trying to do the same:

$(function () {
$("#demo1").jstree({ 
    "json_data" : {
        "data" : [
            { 
                "data" : "<table style='display: inline-block'><tr><td>Site name</td><td>variable 1</td><td>variable 2</td></tr></table>", 
                "children" : [ "Child 1", "Child 2" ]
            },
            { 
                "attr" : { "id" : "li.node.id" }, 
                "data" : { 
                    "title" : "Long format demo", 
                    "attr" : { "href" : "#" } 
                } 
            }
        ]
    },
    "core" : {"html_titles" : true},
    "plugins" : [ "themes", "json_data" ]
});

});

The key is to allow html in the titles which is set in the core options as well as the table style