在右侧显示 Jstree 属性答案

【问题标题】：Display Jstree Attributes on the Right Side在右侧显示 Jstree 属性
【发布时间】：2021-12-03 14:25:43
【问题描述】：

我正在研究 Jstree 我想在屏幕的右侧显示一个节点属性。 Css Currently Showing Like this I want to show the attribute like that

【问题讨论】：

【解决方案1】：

您可以通过在 jstree 节点中使用“wholerow”插件和一点 html/css 来实现。下面是一个没有图标的工作示例。

var rawData = [
    {id: "1", parent: "#", label: "Main Item", amount: 10},
    {id: "1.1", parent: "1", label: "Child Item", amount: 4},
    {id: "1.1.1", parent: "1.1", label: "Sub Child Item", amount: 4},
    {id: "1.2", parent: "1", label: "Child Item 1", amount: 2},
    {id: "1.2.1", parent: "1.2", label: "CHeckkkk", amount: 2},
    {id: "1.3", parent: "1", label: "Child Item 2", amount: 2},
    {id: "1.4", parent: "1", label: "Child Item 3", amount: 2},
    {id: "1.5", parent: "1", label: "New Node 176", amount: 0},
    {id: "2", parent: "#", label: "New Node", amount: 0},
    {id: "3", parent: "#", label: "New Node 173", amount: 0},
    {id: "4", parent: "#", label: "New Node 175", amount: 0}
];

rawData.forEach((e, i) => e.text = `${e.label}<span class='amount'>${e.amount}</span>`);

$('#jstree').jstree({
    core: {
      data: rawData
    },
    plugins: ['wholerow']
  })
  .on('loaded.jstree', function() {
    $('#jstree').jstree('open_all');
  });

#jstree-container {
  width: 300px;
}

li.jstree-node a {
  width: 100%;
}

span.amount {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>

<div id="jstree-container">
  <div id="jstree"></div>
</div>

【讨论】：