insert table into <li> when using jsTree & json

问题

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?

回答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

回答2:

I thought it needs to be solved on javascript level but <table style='display: inline-block'> does the trick

回答3:

Addon: The "text" you supply is actually treated as html by default.

core: {
  data: [{
    id: "ID",
    parent: "#",
    text: "<span>Individual</span>",
    icon: 'fa fa-star text-warning'
  },}]}

来源：https://stackoverflow.com/questions/4019231/insert-table-into-li-when-using-jstree-json