多次重新加载 fancytree 的问题

Question

我有一个日记应用程序，其中有一个 fancytree 显示登录用户的日记条目。在那棵树下面，我有另一个 fancytree，上面有一个下拉菜单，可以让 select 其他用户浏览他们的日记条目。一旦你 select 一个用户，它就会获取他们的用户 ID，然后用他们的条目加载第二棵树。在第 7 个 selection 之前，这一直很好用，在这个时候树挂了，基本上杀死了我的 Tomcat 会话。我必须重新启动 Tomcat 才能修复它。

我的HTML是：

<div class="journalList left-column">
  <div id="logTree"></div>

  <div class="browser">
    <div class="userWrapper">
      <h4>Browse Other User Logs</h4>
      <select id="otherUser">
      </select>
    </div>
    <div id="browseTree"></div>
  </div>
</div>

ID logTree 是登录用户的 fancytree。browseTree 是 selected 用户的。

#logTree 的相关代码在JavaScript。

$('#logTree').fancytree({
    source: {
        type: 'post',
        cache: false,
        url: "/LogbookServlet",
        data: {action:"init", sub:"logtree"},
        datatype: 'json'
    },
    lazyLoad: function(event, data) {
        var node = data.node;
        data.result = getLogTreeData(node.key);
    },
    loadChildren: function(event, data) {
        var node = data.node;
        var activeNode = $("#logTree").fancytree("getActiveNode");
        if (activeNode) {
            activeNode.setExpanded(true);
            var mon = new Date().getMonth();
            var curMonth = months[mon];
            var children = activeNode.getChildren();
            if (children) {
                for (var i = 0; i < children.length; i++) {
                    var childNode = children[i];
                    var title = childNode.title;
                    if (title == curMonth) {
                        $("#logTree")
                        .fancytree("getTree")
                        .activateKey(childNode.key);
                     }
                }
            }
        }
    }
});

第一次加载页面时调用这段代码：

var otherUsrId;
$('#browseTree').fancytree({
    source: [],
    lazyLoad: function(event, data) {
        var node = data.node;
        data.result = getLogTreeData(node.key, otherUsrId);
    },
    loadChildren: function(event, data) {
        var node = data.node;
    }
});

我有一个 Select 的处理程序来检测用户的变化：

$('#otherUser').on('change select', function() {
    // Get the User ID from the Select
    otherUsrId = $(this).val();
    getUserTree(otherUsrId);
});

这里是 getUserTree() 的代码：

function getUserTree(otherUsrId) {
    var userTree = $('#browseTree').fancytree("getTree");
    userTree.reload({
        url: "/LogbookServlet",
        data: {action:"init", sub:"logtree", otherUsrId:otherUsrId},
        datatype: 'json'
    });
}

因此，在第 7 次 selecting 用户之后，"browseTree" fancytree 只是挂起，加载图标在旋转，它杀死了我的浏览器。有任何想法吗？似乎有些东西被递归地调用了？不确定。

Answer 1

我不完全确定它会有所帮助，但我注意到了一个关键点。请在创建树之前尝试添加：

$(":ui-fancytree").fancytree("destroy");

这个缺失的 destroy（有时）在重新加载时给我带来了问题，所以我希望它也能解决你的问题;-)

Answer 2

所以，我找到了我的问题....原来我正在对服务器端名为 getChildren() 的函数进行递归调用。因为我在整个第二棵树中使用延迟加载，所以我不需要调用它。

多次重新加载 fancytree 的问题

Problem with multiple reloads of fancytree

initialization

reload

fancytree