javascript - JSTree - 添加 Action 重定向

Question

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

为简化起见，我有一棵元素树，我想在每个列出的元素名称前放置一个 Action (使用 fontawesome 转到元素的 Action )，我已经知道如何使用 JS 进行重定向，但是JSTree 不允许我在我的树上插入这个 Action 。

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

• (图标-箭头-操作)名称
• (图标-箭头-操作)名称 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>标签。