使用 jsTree 和 json 时将表插入 <li>答案

【问题标题】：insert table into <li> when using jsTree & json使用 jsTree 和 json 时将表插入 <li>
【发布时间】：2010-10-25 21:57:15
【问题描述】：

我可以在使用时以某种方式在<li> 中插入一个表格

jsTree (1.0) 和
json?

假设在这段代码中我想为

插入 table

节点和
叶。

为什么？显示更多内容，而不仅仅是名称并使用漂亮的格式。

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

更新：

在我看来，我可以使用html_titles。但是谁能给我一个例子，如何插入整个表格并从变量中获取单元格数据？

更新2：

我是否使用

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

或

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

表格被放置在新的一行上。不在树形图标旁边。我能以某种方式解决这个问题吗？

【问题讨论】：

我想您可以使用 CSS 将表格放置在树形图标旁边。如果您需要一些帮助，请发布生成的标记和现有的 CSS

标签： html json jstree

【解决方案1】：

扩展原始帖子以帮助其他尝试做同样事情的人：

$(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" ]
});

});

关键是在核心选项中设置的标题以及表格样式中允许html

【讨论】：

【解决方案2】：

我认为它需要在 javascript 级别解决，但 <table style='display: inline-block'> 可以解决问题

【讨论】：

【解决方案3】：

插件：您提供的“文本”实际上默认被视为 html。

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

【讨论】：