Question

我想只在javascript中创建一个jsTree，但是我的代码运行不正常，我找不到问题所在（谷歌的其他主题也没有让我更进一步）。

我的.php文件中有这个div：

<div id="jstree2">
  <ul id="root2">
  </ul>
</div>

在我的.js文件中，我只有以下代码在页面准备就绪时执行：

$("#root2").append("<li class='2013'>2013<ul>");
$("#root2").append("<li class='jan'>January<li>");
$("#root2").append("<li class='feb'>february<li>");
$("#root2").append("<li class='mar'>Mars<li>");
$("#root2").append("</ul></li>");

$("#jstree2").jstree();

给出的结果是这棵树：

| ---- 2013
|
| ---- 1月
|
| ----
|
| ----二月
|
| ----
|
| ----火星
|
| ----

当我从php文件中直接写html（= wenn我在加载php文件后不写它）时，树正确显示。如何才能使树的创建正确（2013年可以打开和关闭）？

Answer 1

您将每个元素附加到根目录。这应该这样做：

$(function () {
    var yearNode = $('<li>', {
        class: '2013'
    }).text('2013');

    var year = $('<ul>');

    year.appendTo(yearNode);

    $('<li>', {
        class: 'jan'
    }).text('January').appendTo(year);

    $('<li>', {
        class: 'feb'
    }).text('February').appendTo(year);

    $('<li>', {
        class: 'mar'
    }).text('March').appendTo(year);

    yearNode.appendTo($('#root2'));

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

Demo

Answer 2

您忘记了正确关闭li标签。你的html生成错误，这就是原因。

$("#root2").append("<li class='2013'>2013<ul>")
.append("<li class='jan'>January</li>")
.append("<li class='feb'>february</li>")
.append("<li class='mar'>Mars</li>")
.append("</ul></li>");

$("#jstree2").jstree();

jsTree创建节点不起作用

2 个答案: