JsTree

Question

我正在使用 jstree 在树中可视化产品。现在我想显示产品的数量。我可以通过在文本中添加一个数字来轻松做到这一点，但如果我这样做，用户可以在重命名节点时更改数量。我不希望用户以这种方式更改数量（他们在单独的产品页面上进行更改）。

如何在 jstree 中显示数量但不将数量放在文本中（这样用户就不能重命名）？我为不同的产品类型使用自定义图标，所以我不能使用图标来显示每个节点上的数量。

示例：我想像下面这样可视化每个节点：

[图标][数量][text/title]

重命名时我只想重命名 text/title（不是数量）

Answer 1

您可以使用伪元素和生成的内容。例如，您可以通过指定 a_attr.

将数据属性传递给节点 link

 $('#container').jstree({
    'core' : {
      'data' : [
        {
          "text" : "Root node",
          "a_attr": {
            "data-quantity": 120
          },
          "children" : [
            { 
              "text" : "Child node 1",
              "a_attr": {
                 "data-quantity": 100
              }
            },
            { 
              "text" : "Child node 2",
              "a_attr": {
                 "data-quantity": 20
              }
            }
          ]
        }
      ]
    }
  });

.jstree-anchor {
  position: relative;
}

.jstree-anchor::before {
  content: attr(data-quantity);
  position: absolute;
  top: 0px;
  left: 24px;
}

a[data-quantity] > .jstree-icon {
  margin-right: 28px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js"></script>
<div id="container"></div>

JsTree - 在每个节点上显示数量

JsTree - Show quantity on each node

javascript