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",
开发者_JAVA百科 "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?
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
I thought it needs to be solved on javascript level but <table style='display: inline-block'>
does the trick
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'
},}]}
精彩评论