Question

我无法找到在加载时打开特定JS树分支的方法。我当前的树是通过Ajax加载的，因此只显示顶层，所有其他分支在扩展时通过Ajax加载。我想要的是，如果用户将页面加载到树中的某个位置，那么我希望加载树，并在树上打开该分支。

我非常确定我可以通过将children部分传递给该特定节点的JSON来将其添加到JSON中。但是，如何加载已打开该分支的树？

我可以执行一个后加载功能，它会打开我指定的节点但这些感觉有点乱，有没有办法在加载时打开分支？

我通过JSON加载树的当前函数是：

$.jstree.defaults.core.data = true;
$('.nav-tree').jstree({
    'core' : {
        'data' : {
            'url' : function (node) {
              return host+ "treeNavigation?format=json";                        
            },
            'data' : function (node) {
                return node.id === '#' ? { 'rootid' : 0} : {'rootid' : node.id};
            }
        }
    },
    "plugins" : [
        "wholerow"
    ]
});

Answer 1

我发现结果是在返回的JSON中。通过添加额外的数据，我们可以在加载到树中的特定位置时打开树。

我们添加到JSON的数据是：

"state" : { "opened" : true, "selected" : true}

如果节点有子节点，我们将使用"children" : true如果节点进一步向下打开，那么我们将添加子节点详细信息代替true。

作为示例，我们返回的数据如下所示：

{
"id" : "1",
"Text" : "folder 1",
"state" : {"opened" : true, "selected" : true },
"children" : [{
    "id" : "1.1"
    "text" : "folder 1.1"
    "children" : true
    },
    {
    "id" : "1.2"
    "text" : "folder 1.2"
    "children" : false
    } 
    } ]
}

以上指出ID为1的文件夹应该是打开的，并显示以下子项1.1和1.2。 1.1将是一个有孩子的节点，并会在选择时打开。

Answer 2

jstree有加载事件loaded.jstree，您可以使用$(this).jstree("open_node", 'your node')添加代码以打开节点。

var i = 2;
$('.nav-tree').on('loaded.jstree', function(e, data) {
    // invoked after jstree has loaded
    $(this).jstree("open_node", $(nodes[i]));
});

$('.nav-tree').jstree({
    'core' : {
        'data' : {
            'url' : function (node) {
              return host+ "treeNavigation?format=json";                        
            },
            'data' : function (node) {
                return node.id === '#' ? { 'rootid' : 0} : {'rootid' : node.id};
            }
        }
    },
    "plugins" : [
        "wholerow"
    ]
});

Jstree在加载时打开特定分支

2 个答案: