在右侧显示jtree属性

Question

我正在jtree上工作，我想在屏幕的右侧显示Node属性。Css当前显示如下我想这样显示属性

Answer 1

您可以使用"wholerow"插件和一点html/css在jtree节点。下面是一个没有图标的工作示例。

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>