Question

我已为jstree安装了grails插件。我似乎无法让它正常工作。

它似乎不是一个资源问题，你将在下面找到。我不知道它不会起作用。

这是我的HTML

<div id="jstree">
    <ul>
        <li>Folder 1
            <ul>
                <li id="child_1">Child 1</li>
                <li>Child 2</li>
                <li id="child_2">Child 1</li>
                <li>Child 2</li>
                <li id="child_3">Child 1</li>
                <li>Child 2</li>
                <li id="child_4">Child 1</li>
                <li>Child 2</li>
            </ul>
        </li>
        <li>Folder 2</li>
        <ul>
            <li id="child_5">Child 1</li>
            <li>Child 2</li>
            <li id="child_6">Child 1</li>
            <li>Child 2</li>
            <li id="child_7">Child 1</li>
            <li>Child 2</li>
            <li id="child_8">Child 1</li>
        </ul>
    </ul>
</div>

然后我的javascript就是

$(function () {
    $('#jstree').jstree();
});

我得到了这个^^ 它允许我点击它来扩展第一个文件夹子节点，但不是第二个。然后我尝试了这个javascript

$(function () {
    $("#jstree").jstree({ "plugins" : [ "themes", "default" ] });
});

我得到了这个^^ 点击它什么都不做

然后我绑了这个

$(function () {
    $('#jstree').jstree();
});


$("#jstree").jstree({
    "themes": {
        "theme": "default",
        "dots": true,
        "icons": true,
        "url": "/css/jstree/themes/default/style.css"
    },
    "plugins" : [ "themes", "ui" ]
});

我得到了这个^^

这可能是一个兼容性问题，我不认为这是因为它适用于其他网站，如jstree.com

Answer 1

您的html结构似乎不正确，您在<ul>

中包含了第二个<li>

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

<div id="jstree">
    <ul>
        <li>Folder 1
            <ul>
                <li id="child_1">Child 1</li>
                <li>Child 2</li>
                <li id="child_2">Child 1</li>
                <li>Child 2</li>
                <li id="child_3">Child 1</li>
                <li>Child 2</li>
                <li id="child_4">Child 1</li>
                <li>Child 2</li>
            </ul>
        </li>
        <li>Folder 2
          <ul>
              <li id="child_5">Child 1</li>
              <li>Child 2</li>
              <li id="child_6">Child 1</li>
              <li>Child 2</li>
              <li id="child_7">Child 1</li>
              <li>Child 2</li>
              <li id="child_8">Child 1</li>
          </ul>
        </li>
    </ul>
</div>

＆＃13;

Javascript树无法正常工作

1 个答案: