Question

jsTree应该在每个页面重定向/重新加载时保存树的状态，但不能一致地执行。树似乎只在某些时候保存状态。

我的树看起来像这样，总是可以看作页面左侧的导航菜单：

| Category 1
|
| Category 2
|   ---Sub 2.1
|
| Category 3
|   --- Sub 3.1
|   --- Sub 3.2
|        --- Sub 3.2.1
|        --- Sub 3.2.2

我们假设我选择了类别3.2.2。这会重定向用户并在页面加载时正确突出显示所选类别。

期望通过单击类别1，再次重定向用户，并在页面加载完成后立即选择类别1。这不是发生的事情。相反，用户将被定向到此页面，但Sub 3.2.2仍显示为已选中。

奇怪的是，当我点击类别3时，此类别被正确突出显示;现在，点击和重定向时不会选择一组不同的节点。

以下是树的初始化方式：

$(function() {
// Get categories from JSON server
     $.getJSON('/getcategories', function(treedata) {

            // Builds JSON data for the tree
            var tree = menuRoot(treedata.categoryList);

            $('#jsCategoryTree').jstree({
                'core' : {'multiple' : false, 'data' : tree}, 
                'state' : { 'key' : 'jsCategoryTree', 'events' : 'activate_node.jstree'},
                'plugins' : ['state','cookies','ui','html_data'],
                'cookies' : { cookie_options : { path : '/' } }
            });

            // Binds a link to each node to redirect user
            $('#jsCategoryTree').on('activate_node.jstree', function(e, data) {
                var categoryId = data.node.id;
                location.href = '/?categoryId=' + categoryId;
            });     
        });
})

我尝试使用默认事件初始化，以及各种组合： changed.jstree，open_node.jstree，close_node.jstree，enable_node.jstree，activate_node.jstree，select_node.jstree，set_state.jstree ，refresh.jstree

我的理解是每次单击节点时都会调用activate_node.jstree，因此它应该触发save_state方法，从而在页面重新加载/重定向上重现正确的选择。

可能导致此行为的原因是什么？

Answer 1

解决。问题是由于jsTree没有完成所有内部事件。直到所有事件都完成后才调用Save_state，并且在达到save_state之前浏览器正在重定向，从而导致不可预测的行为。

使用setTimeout阻止浏览器立即重定向修复问题。这个值是任意的，但100毫秒似乎对我有用。

// Binds a link to each node to redirect user
$('#jsCategoryTree').on('activate_node.jstree', function(e, data) {
    var categoryId = data.node.id;
    setTimeout(function() {location.href = '/?categoryId=' + categoryId;}, 100);   
});

jsTree加载错误的状态

1 个答案: