jstree 是空白的，实例化后有一个空 <ul>

Question

我正在尝试让基本的 jstree 工作，但不幸的是每次通过 element.jstree() 实例化 jstree 时，都会生成一个空标签并且没有任何内容。

我尝试过不同的环境、计算机和浏览器，并且都表现出相同的行为。

这是一个基于我用来尝试解决这个问题的教程的 jsfiddle，其中你可以看到树没有在运行！

HTML:

<div id="filetree" style="height: 200px;">
  <li data-jstree='{"opened":true,"selected":true}'>Root
    <ul>
      <li data-jstree='{"disabled":true}'>Child</li>
      <li data-jstree='{"icon":"/static/modules/tree.png"}'>
        Child</li>
      <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
        Child</li>
    </ul>
  </li>
</div>

没有CSS

Javascript:

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

包括：

<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

Answer 1

您的树似乎需要一个无序列表。尝试将 HTML 更改为如下所示（注意在 <div id="filetree">:

之后添加 <ul>

<div id="filetree" style="height: 200px;">
  <ul>
    <li data-jstree='{"opened":true,"selected":true}'>Root
      <ul>
        <li data-jstree='{"disabled":true}'>Child</li>
        <li>Child</li>
        <li data-jstree='{"icon":"glyphicon glyphicon-leaf"}'>
          Child</li>
      </ul>
    </li>
  </ul>
</div>

jstree 是空白的，实例化后有一个空 <ul>

jstree is blank and has an empty <ul> after instantiation

javascript

jquery

jstree