在右侧显示 Jstree 属性

Posted 2023-05-09

【中文标题】在右侧显示 Jstree 属性

【英文标题】：Display Jstree Attributes on the Right Side

【发布时间】：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>