Question

我有jsTree从JSON页面加载数据并正确显示。我正在尝试默认选择根节点，但我无法让它工作。

这是我的jQuery：

$(function () {
    $("#demo1").jstree({ 
        "plugins" : [ "themes","json_data","ui" ],
        "json_data" : {
            "ajax" : {
                "url" : "categorytreejson.asp"
            },
            "ui" : {
                "initially_select" : [ "root" ]
            },
        }
    });
});

这是来自categorytreejson.asp的我的JSON，它使用JSONLint进行验证：

{
  "data": "root",
  "attr": {
    "id": "root"
  },
  "children": [
    {
      "data": "Photography",
      "attr": {
        "id": "Photography"
      },
      "children": [
        {
          "data": "Lenses",
          "attr": {
            "id": "Lenses"
          },
          "children": [
            {
              "data": "Telephoto",
              "attr": {
                "id": "Telephoto"
              }
            },
            {
              "data": "Macro",
              "attr": {
                "id": "Macro"
              }
            },
            {
              "data": "Other",
              "attr": {
                "id": "Other"
              }
            }
          ]
        }
      ]
    }
  ]
}

以下是生成的HTML：

<li class="jstree-last jstree-open" id="root"><ins class="jstree-icon">&nbsp;</ins><a class="" href="#"><ins class="jstree-icon">&nbsp;</ins>root</a>
    <ul style="">
        <li class="jstree-closed" id="Photography"><ins class="jstree-icon">&nbsp;</ins><a class="" href="#"><ins class="jstree-icon">&nbsp;</ins>Photography</a>
            <ul>
                <li class="jstree-last jstree-closed" id="Lenses"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Lenses</a>
                    <ul>
                        <li class="jstree-leaf" id="Telephoto"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Telephoto</a>
                        </li>
                        <li class="jstree-leaf" id="Macro"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Macro</a>
                        </li>
                        <li class="jstree-last jstree-leaf" id="Other"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Other</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
</li>
</ul>
</li>
</ul>
</li>

由firebug查看结果数据对象：

args: []
inst: Object { data={...}, get_settings=function(), _get_settings=function(), more...}
rlbk: false
rslt: undefined

我假设大部分问题是因为结果是空的但我不确定为什么？

Answer 1

您正在将UI插件配置置于 json_data插件配置中。
你需要把它拿出来，它会起作用。

    "json_data" : {
        "ajax" : {
            "url" : "categorytreejson.asp"
        }
    },
    "ui" : {
        "initially_select" : [ "root" ]
    }

Answer 2

在jstree的bind函数中添加以下行以选择加载树时的最后一个节点 -

$('#tree_id').jstree('select_node', 'ul > li:last');

要始终选择第一个节点，请使用 -

$('#tree_id').jstree('select_node', 'ul > li:first');

实施例 -

$('#tree_id').bind("loaded.jstree", function(e, data) {
    $(this).jstree("open_all");
    $('#tree_id').jstree('select_node', 'ul > li:last');
})

Answer 3

@Zheileman回答比我好得多，但我认为分享另一种解决方法会很有趣：

在文档就绪时我使用jstree事件做了这个：

 var i = 0;
            $.each($("#container").jstree()._model.data, function (value, index) {
                if (i == 1) {
                    $("#container").jstree(true).select_node(value, false, false);
                    $("#container").jstree(true).open_node(value);
                    return false;
                }  
                i++;
            })

无法让jQuery插件jsTree最初选择一个节点

3 个答案: