jsTree 3中的自定义图标?

时间:2014-01-22 17:49:52

标签: icons jstree

我尝试使用“类型”插件向节点添加自定义图标,但它不起作用或通过“图标”字段,但后来我无法从“自动”值更改背景大小。 请有人帮帮我。

$("#jstree")
        .on("ready.jstree", function (e, data) {
            $('div#jstree li > a[rel="disabled"] i.jstree-checkbox').remove();
        })
        .on("open_node.jstree", function (e, data) {
            $('div#jstree li > a[rel="disabled"] i.jstree-checkbox').remove();
        })
        .jstree({
        "core": {
            "data": { "url": "/Home/TreeData" }
        },
        "types": {
            "boss": {
                "icon": "/Content/jsTree/boss.png"
            }
        },
        "plugins": ['checkbox', 'theme', "html_data"]
    });

JSON:

[{"id":null,
  "text":"Root",
  "icon":"/Content/jsTree/boss.png",
  "state":null,
  "children":
    [{"id":null,
      "text":"Leaf A",
      "icon":null,
      "state":null,
      "children":null,
      "li_attr":{"rel":"boss"},
      "a_attr":null},
     {"id":null,
      "text":"Leaf B",
      "icon":null,
      "state":null,
      "children":null,
      "li_attr":null,
      "a_attr":{"rel":"boss"}},
     {"id":null,
      "text":"Leaf C",
      "icon":null,
      "state":null,
      "children":null,
      "li_attr":null,
      "a_attr":{"rel":"disabled"}
     }],
  "li_attr":null,
  "a_attr":null
}]

1 个答案:

答案 0 :(得分:7)

您需要在插件列表中添加“types”插件:

"plugins": ['checkbox', 'theme', "html_data", "types"]

您还需要在节点的数据中提供type属性(而不是使用li_attr):

[{"id":null,
  "text":"Root",
  "icon":"/Content/jsTree/boss.png",
  "state":null,
  "type":"boss"
  ...