None 个 jstree 插件正在运行

Question

这是一个有点令人沮丧的问题，我似乎找不到任何相关文档。我对 jQuery 比较陌生（虽然我对它的掌握正在发展），而且我对这个 jsTree 插件完全陌生。

问题很简单，我无法使用任何插件。由于拖放、上下文菜单和复选框功能，我被它吸引了，但它们并没有发生。我没有收到任何错误，只是没有复选框和默认的 Chrome 上下文菜单。而且我不能拖放任何东西。

jsTree 使用 AJAX 填充：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jstree test</title>
<link rel="stylesheet" href="Styles/style.min.css" />
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/jstree.min.js"></script>
<script>
    $(document).ready(function () {
        $('#jsTreeTest').jstree({
            'core': {
                'check_callback' : true,
                'data': {
                    'url': 'Temp/ajax.html',
                    'data': function (node) {
                        return { 'id': node.id };
                    }
                }
            },
            'plugins' : [ "checkbox", "dnd", "contextmenu"]
        });
    });
</script>

标记看起来像这样：

<body>
  <form id="form1" runat="server">
  <div>
      <div id="jsTreeTest">

      </div>
  </div>
  </form>
</body>

html 文件 ajax.html 包含以下内容：

<ul>
<li>Test
    <ul>
        <li>SubDir1
            <ul>
                <li><a href='#'>File1.txt</a></li>
            </ul>
        </li>
        <li>SubDir2
            <ul>
                <li>SubSubDir1
                    <ul>
                        <li><a href='#'>File1.txt</a></li>
                        <li><a href='#'>File2.txt</a></li>
                    </ul>
                <li><a href='#'>File2.txt</a></li>
                <li><a href='#'>File3.txt</a></li>
            </ul></li>
        <li><a href='#'>File4.txt</a></li>
        <li><a href='#'>File5.txt</a></li>
    </ul>
</li>
</ul>

顺便说一句，它还显示了旁边带有文件夹图标的所有内容，这是我不明白的另一件事。我缺少参考吗？

Answer 1

确保包含 css 文件，因为这将极大地改变寻找 jsTree 插件的方式。

  $(document).ready(function () {
        $('#jsTreeTest').jstree({
            'core': {
                'check_callback' : true,
              
            },
            'plugins' : [ "checkbox", "dnd", "contextmenu"]
        });
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default/style.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.1.1/themes/default-dark/style.min.css" rel="stylesheet"/>
<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.1.1/jstree.min.js"></script>
<body>
  <form id="form1" runat="server">
  <div>
      <div id="jsTreeTest">
<ul>
<li>Test
    <ul>
        <li>SubDir1
            <ul>
                <li><a href='#'>File1.txt</a></li>
            </ul>
        </li>
        <li>SubDir2
            <ul>
                <li>SubSubDir1
                    <ul>
                        <li><a href='#'>File1.txt</a></li>
                        <li><a href='#'>File2.txt</a></li>
                    </ul>
                <li><a href='#'>File2.txt</a></li>
                <li><a href='#'>File3.txt</a></li>
            </ul></li>
        <li><a href='#'>File4.txt</a></li>
        <li><a href='#'>File5.txt</a></li>
    </ul>
</li>
</ul>
      </div>
  </div>
  </form>
</body>

Answer 2

在加载插件的特定 js 文件之前，我无法让复选框或上下文菜单显示在我的 jsp 文件中：

<link href="/js/jstree/themes/default/style.css" rel="stylesheet" type="text/css" />
<script src="/js/jstree/jstree.js"></script>
<script src="/js/jstree/jstree.checkbox.js"></script>
<script src="/js/jstree/jstree.contextmenu.js"></script>

感谢让我尝试这个的提示 - 我在我看到的所有其他帖子中都没有看到它！呸！

None 个 jstree 插件正在运行

None of the jstree plugins are functioning

javascript

jquery

html

ajax

jstree