JsTree - 在每個節點上顯示數量

Question

我正在使用jstree在樹中顯示產品。 現在我想顯示產品的數量。 我可以很容易地通過在文本中添加一個數字來做到這一點，但如果我這樣做，用戶可以在重命名節點時更改數量。我不希望用戶以這種方式更改數量（他們在單獨的產品頁面上進行更改）。

如何在jstree中顯示數量但不在文本中顯示數量（因此用戶不能重命名它）？ 我正在爲不同的產品類型使用自定義圖標，因此我無法使用圖標在每個節點上顯示數量。

實施例： 我想visulation每個節點象下面這樣：

[ICON] [量] [文本/標題]

而且renamning當我只想文本重命名/標題（不是數量）

Answer 1

你可以玩僞元素和生成的內容。例如，您可以通過指定a_attr將數據屬性傳遞給節點鏈接。

$('#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>