jquery - 如何在 Jquery 花式树的单独 div 中显示父母和孩子？

Question

我正在使用Jquery Fancy Tree 版本 2.3.0。我需要在单独的 div 中单击父节点时显示父母的子菜单项

设想：

加载页面时，父项将列在 div 中。单击任何父项时，我需要将子项加载到另一个 div 中。我怎么能做到这一点？

Answer 1

activate您可以通过使用 2 棵树并在父树的方法上重新加载子树来实现此目的。

<script type="text/javascript">
$(function() {
    // Create your parent tree, set activate method to create child tree when 
    // parent node is selected
    $("#tree").fancytree({
        activate: function(event, data) {
            // Use key of selected parent node to load child tree
            createChildTree(data.node.key);
        }
    });

    // Create empty child tree
    $("#tree2").fancytree();
});

function createChildTree(key) {
    // Remove current child tree (allows new tree to be created using key from 
    // selected parent)
    $("#tree2").fancytree("destroy");

    // Create new child tree using key from selected parent
    $("#tree2").fancytree({
        source: {
            url: "/source/url",
            data: { "key": key }
        }
    });
}
</script>

<div id="tree"></div>
<div id="tree2"></div>