Jstree 使用 HTML link 和 <a>

Question

我用 jstree 做了一个简单的文件夹结构。

到目前为止一切正常，但我想知道是否有一种简单的方法可以通过 "a href=" 在树中使用可点击的超链接。当我双击 folder/word 本身时，菜单结构会下拉，但在这种情况下单击超链接 google.de 不起作用。事实上，当您单击 folders/words.

时什么也没有发生

<div id="categorymenue">
 <ul>
     <li><a href="google.de">One</a>
     <ul>
     <li>Example 1</li>
     <li>Example 2
     <ul>
 <li>Example 1</li>
 <li>Expample 2</li>
 </ul></li></li></ul>
 <li>Two
     <ul>
 <li>Example 1</li>
 <li>Example 2</li>
 </ul></li>
 <li>Three
 <ul>
     <li>Example 1</li>
     <li>Example 2</li>
</ul>
</li>
<li>JOKE</li>
</ul>
</div>

Answer 1

查看 JSTree 的文档，它清楚地指出您添加的任何自定义标记默认情况下都会被覆盖。 As the docs say:

Internally jstree converts the text to a link, so if there already is a link in the markup jstree won't mind. Like Child node 2. Clicking on the link however will not direct the user to a new page, to do that - intercept the changed.jstree event and act accordingly.

所以，这告诉我们，每当有人点击一个元素时，无论是否有 link，您都需要切换有问题的节点。

HTML:

<div id="jstree">
    <!-- in this example the tree is populated from inline HTML -->
    <ul>
      <li><a href="#root_node_1">Root node 1
        <ul>
          <li id="child_node_2"><a href="#child_node_1">Child node 1</a></li>
          <li><a href="#another_custom_anchor">Child node 2</a></li>
        </ul>
        </a>
      </li>
      <li id="root_node_2">Root node 2</li>
    </ul>
  </div>

PS: 注意 a-tag 包裹了整个 #root_node_1 元素。

JS:

$(function() {
    // Code here
    $('#jstree').jstree()
    $('#jstree').on("changed.jstree", function (e, data) {
      $.jstree.reference('#jstree').toggle_node(data.selected);
      // Alternatively use open_node or close_node explicitly depending on whether it is open or closed.
    });
});

这是一个 JS Fiddle: https://jsfiddle.net/Lr7xLx5k/25/

因此，当您单击 href 时，您实际做的是调用 API 节点叶告诉它显示 该节点的内容. #href 是什么并不重要。

现在应该很清楚，这是与插件的斗争，直到人们争论不休，想知道是否要完全符合或切换（到不同的插件）。

为什么需要 links？

API 参考文献。

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
</head>
<body>


<!-- 3 setup a container element -->
<div id="categorymenue">
    <ul>
        <li>
            <a href="http://google.de">One</a>
            <ul>
                <li>Example 1</li>
                <li>Example 2
                    <ul>
                        <li>Example 1</li>
                        <li>Expample 2</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Two
            <ul>
                <li>Example 1</li>
                <li>Example 2</li>
            </ul>
    </li>
        <li>Three
            <ul>
                <li>Example 1</li>
                <li>Example 2</li>
            </ul>
        </li>
        <li>JOKE</li>
    </ul>
</div>


<script>
    $(function () {
        $('#categorymenue').jstree();


        var DELAY = 700, clicks = 0, timer = null;
        $("a").on("click", function (e) {
            clicks++;

            var _this = this;
            if (clicks === 1) {

                timer = setTimeout(function () {

                    if ($(_this).attr('href')) {
                        window.location = $(_this).attr('href');
                    }
                    clicks = 0;

                }, DELAY);

            } else {
                clearTimeout(timer);
                clicks = 0;
            }

        })
            .on("dblclick", function (e) {
                e.preventDefault();
            });

    });
</script>
</body>
</html>

Jstree 使用 HTML link 和 <a>

Jstree use HTML link with <a>

javascript

php

jstree