如何使用 jsTree jQuery 插件预选节点答案

【问题标题】：How to preselect nodes using jsTree jQuery plug-in如何使用 jsTree jQuery 插件预选节点
【发布时间】：2010-03-11 04:32:53
【问题描述】：

我正在使用带有“复选框”插件的 jsTree jQuery 插件，并使用异步 http 请求来延迟加载树的每个级别。一切都很好，除了我无法让树在第一级之后预先选择某些节点。我正在使用“selected”属性来提供要预选的 ID 数组。树顶层的 ID 已正确预选。但是，在加载关卡时不会选择树的较低级别中的 ID。我错过了什么吗？

这里是构造函数代码：

    var myArrayOfIDs = new Array();
    myArrayOfIDs[0] = '123';  //etc...

    $(sDivID).tree(
        {
            data : {
                async : true,
                opts : {url : sURL}
            },
            plugins:{ 
                "checkbox" : {three_state : false}
            },
            selected : myArrayOfIDs,
            ui:{
                theme_name : "checkbox",
                dots : false,
                animation : 400
            },
            callback : {
                beforedata : function(NODE, TREE_OBJ) { return { id : $(NODE).attr("id") || 0, rand : Math.random().toString() } }
            }
        }
    )

【问题讨论】：

标签： jquery jquery-plugins jstree

【解决方案1】：

$(".jstree").jstree({
    "plugins" : [ "themes", "html_data", "checkbox", "ui" ],
    "checkbox": {
        "real_checkboxes": true,
        "real_checkboxes_names": function (n) {
            return [n[0].id, 1];
        },
        "two_state": true
    }
}).bind("loaded.jstree", function (event, data) {
    $('li[selected=true]').each(function () {
        $(this).removeClass('jstree-unchecked').addClass('jstree-checked');
    });
});

我正在将它用于最新版本的 jstree。

【讨论】：

据我了解，这只会处理 css 并在用户取消选择节点时引起问题。我能够在此示例中使用 here 预选节点

【解决方案2】：

嗯，我觉得你的代码很好。

我在解决方案中采用了稍微不同的方法，因为我希望服务器（即您的 sURL）告诉我应该选择哪些项目 - 然后在 jsTree 的 onload 回调中选择它们。

更新：我已将我的 jsTree 博客文章更新为最新版本的 jsTree here

-马特

【讨论】：

正如 Matt Frear 在他的博客 mattfrear.com/2010/05/19/jstree 上的评论，这不再适用了。所以我们没有其他解决方案？
@Vinh 我已经更新了我的博客文章，现在它可以与 jsTree 的 1.0 版本一起使用。
嗨，我要感谢@Matt Frear。我用了你的文章，它对我帮助很大。但现在我想让选定的节点加载。它对我不起作用。请注意我的问题好吗？ stackoverflow.com/questions/17519593/…

【解决方案3】：

这是我在加载树后更新选择的方式：

$('#jstree_div')
      .on('changed.jstree', treeChanged)
      .on('loaded.jstree', treeLoaded)
      .jstree({
      'plugins': ["checkbox"],
      'core': {
          'data': {
              'url': '/xmldata/getcategories'
          }
      }
  });

function treeLoaded(event, data) {
    data.instance.select_node(['2', '5']); //node ids that you want to check
}

【讨论】：