JSTree

Question

我在使用 JSTree (https://www.jstree.com/) 时遇到了一点问题。

为简化起见，我有一个项目树，我想在每个列出的项目的名称前放置一个动作（使用 fontawesome 转到项目的动作），我已经知道如何使用 JS 进行重定向, 但 JSTree 不允许我在我的树上插入这个动作。

以视觉方式，我需要做类似的事情：

（图标-箭头-操作）名称
（图标-箭头-操作）名称 2
- （图标-箭头-操作）名称 3

我正在做这样的事情：

(HTML)

<div id="jstree_projects">
  <ul>
    <li data-jstree='{"opened":true}'>
      <i class="fa fa-arrow-right fa-fw redirect_project"
         data-url="<?= site_url('ON CLICK THIS ACTION, REDIRECT TO THIS URL'); ?>">
      </i>
      PROJECT NAME
      <ul>
        <li data-jstree='{"opened":true}'>
          <i class="fa fa-arrow-right fa-fw redirect_project"
             data-url="<?= site_url('ON CLICK THIS ACTION, REDIRECT TO THIS URL'); ?>">
          </i>
          PROJECT NAME 2
        </li>
      </ul>
    </li>
  </ul>
</div>

(CSS)

#jstree_projects{
  margin-top: 20px;
  width: 100%;
  overflow-x: auto;
}
.redirect_project{
  color: yellow;
  margin-right: 10px;
}

(JS)

$('#jstree_projects').jstree();

如果有人能帮助我，我将不胜感激。

Answer 1

您可以使用 select_node.jstree 事件。它将为您提供选定的 node 对象及其相关数据。此外，您可以使用属性 children: [].

检查它是否是列表中的最后一项

我已经为你创建了一个jsFiddle，点击here。我所做的唯一更改是将 data-url 属性移动到 <li> 标记。

JSTree - 添加动作重定向

JSTree - Add action to Redirect

javascript

jquery

css