为什么即使在设置中指定了我的 jstree 图标也没有改变

Question

我有一个 jstree，我想为其使用其他图标而不是默认图标，

我试过的是：

在设置中指定 icon 为 types

"types" : {
   "default" : { "icon" : "glyphicon glyphicon-cloud" }
 },

即使它不起作用

下面是演示（仍然出现文件夹图标）：

$(function () {
    $('#jstree').jstree({
        "json_data" : {
            "data" : [
                {
                    "data" : "A node",
                    "metadata" : { id : 23 },
                    "children" : [ "Child 1", "A Child 2" ]
                },
                {
                    "attr" : { "id" : "li.node.id1" },
                    "data" : {
                        "title" : "Long format demo",
                        "attr" : { "href" : "#" }
                    }
                }
            ]
        },
        "types" : {
           "default" : { "icon" : "glyphicon glyphicon-cloud" }
         },
        "plugins" : [ "themes", "json_data", "ui" ]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree">
</div>

Answer 1

您忘记包含 types 插件：

"plugins" : [ "themes", "json_data", "ui", "types" ]

此外，它出现 icon should be an object，而不是字符串：

You can set an icon key - it should be an object consisting of two keys - image (string - location of the image to be used as an icon) & position (string - left and top pixels of the image - 10px 40px, only useful when using sprites - omit otherwise).

您似乎混淆了当前版本和您的版本的 API，v1.0pre。

Answer 2

给你这段代码适用于最新版本的 jstree，你应该包括的一件事是 link 到 font-awesome 或者如果你必须使用 glyphicon 则必须包括它的库，因为它不是免费的，因此为此目的使用 font-awesome

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <!-- 1 load Font-awesome css>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 2 load the theme CSS file -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
  <!-- 3 setup a container element -->
  <div id="jstree">
  </div>

  <!-- 4 include the jQuery library -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
  <!-- 5 include the minified jstree source -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
  <script>
  $(function () {
    $('#jstree').jstree({
        "core" : {
            "data" : [
                {
                    "data" : "A node",
                    "metadata" : { id : 23 },
                    "children" : [ "Child 1", "A Child 2" ]
                },
                {
                    "attr" : { "id" : "li.node.id1" },
                    "data" : {
                        "title" : "Long format demo",
                        "attr" : { "href" : "#" }
                    }
                }
            ]
        },
        "types" : {
           "default" : { "icon" : "fa fa-cloud" }
         },
        "plugins" : [ "themes", "json_data", "ui", "types"]
    });
});
  </script>
</body>
</html>

为什么即使在设置中指定了我的 jstree 图标也没有改变

Why my jstree icon is not changing even though specifying it in the settings

javascript

jquery

jstree