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更改为这样（请注意<ul>之后添加<div id="filetree">：

<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>

1 个答案: