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

时间:2015-02-27 05:15:20

标签: jquery fancytree

我正在使用 Jquery Fancy Tree 版本2.3.0 。我需要在单独的div

中单击父节点时显示父项的子菜单项

情景:

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

1 个答案:

答案 0 :(得分: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>