如何在Jquery花式树中的单独div中显示父级和子级

Question

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

场景：

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

Answer 1

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

<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>