javascript - JSTree使用json数据在标题后添加图像

Question

我正在使用 jsTree，我想在使用 json 数据的节点标题之后添加图像这是示例图像。我想在标题报告标题之后添加添加部分和添加元素图像

Answer 1

Radek 在 jstree-grid 页面https://github.com/deitch/jstree-grid/issues/26上打开了一个问题

我很难理解的是，它看起来不像你想要一个网格。看起来您希望节点标签本身也有一些 html？还是您确实想要 html，但您希望输入是 json 转换为 html 的问题？

Answer 2

对于旧版本jsTree 1.0-rc3，我们需要html_titles : true将节点标题设置为 html 内容而不是纯文本。

例子：

buttons = "<strong><a class='delete' href='javascript:;'>x</a><a class='extend' href='javascript:;'>+</a></strong>"
$("#demo1").jstree({
  "json_data" : {
    "data" : [
    {
      "data" : "A node" + buttons,
      "metadata" : { id : 23 },
      "children" : [ "Child 1", "A Child 2" ]
    }
    ]
  },
  "plugins" : [ "themes", "json_data", "ui"],
  "core": {html_titles : true}
});

希望它可以帮助jstree像我一样在旧版本中受到打击的人。:)

Answer 3

这是我使用 JSON 数据将图标附加到 JSTREE 节点文本的解决方案。我正在使用 Microsoft 的 fabric.css 作为图标库。（使用 jstree 3.3.1 & Bootstrap 作为边距类）

//Create JSON Obj
var obj = {
    id: 1, 
    text: "MY NODE TEXT" + "<i class='ms-Icon ms-Icon--check ml-2'></i>", 
    state: { opened: true },
    li_attr: { "class": "myCustomClass"}
};
 
// Append to array
var JSONDATA = [];
JSONDATA.push(obj);

//Push to JSTREE
$('#jstree').jstree(true).settings.core.data = JSONDATA;