Question

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

如何在jstree中显示数量但不在文本中显示数量（因此用户无法重命名）？我正在为不同的产品类型使用自定义图标，因此我无法使用该图标在每个节点上显示数量。

实施例：我想像以下一样浏览每个节点：

[icon] [数量] [文字/标题]

当重新命名时，我只想重命名文本/标题（而不是数量）

Answer 1

您可以使用伪元素和生成的内容。例如，您可以通过指定a_attr将数据属性传递给节点链接。

＆＃13;

 $('#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
              }
            }
          ]
        }
      ]
    }
  });

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: