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

Question

我正在使用jsTree，我想使用json数据在节点标题后添加图像 这是示例图像。我想在标题报告标题

之后添加添加部分和添加元素图像

Answer 1

Radek在jstree-grid页面https://github.com/deitch/jstree-grid/issues/26

上打开了一个问题

我很难理解的是，它看起来不像你想要一个网格;看起来你想要节点标签本身也有一些HTML？或者你做想要html的问题，但是你希望输入是转换为html的json吗？

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用于margin类）

//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;