jQuery FancyTree,在点击展开问题

jQuery FancyTree, on click expand issue

本文关键字:问题 FancyTree jQuery      更新时间:2023-09-26

我正在 FancyTree 插件的帮助下做选择树,我正在尝试实现点击事件,当您单击选择框的标题时,它会起作用,他的所有子项目并在所有级别中扩展。

首先...我给你看一下剧本:

var treeData = [
    {title: "item1 with key and tooltip", tooltip: "Look, a tool tip!",
        children: [
            {title: "Sub-item 3.1",
                children: [
                    {title: "Sub-item 3.1.1", key: "id3.1.1" },
                    {title: "Sub-item 3.1.2", key: "id3.1.2" }
                ]
            },
            {title: "Sub-item 3.2",
                children: [
                    {title: "Sub-item 3.2.1", key: "id3.2.1" },
                    {title: "Sub-item 3.2.2", key: "id3.2.2" }
                ]
            }
        ]
    },
    {title: "item2: selected on init", 
         children: [
            {title: "Sub-item 4.2",
                children: [
                    {title: "Sub-item 4.2.1", key: "id3.1.1" },
                    {title: "Sub-item 3.2.2", key: "id3.1.2" }
                ]
            },
            {title: "Sub-item 3.2",
                children: [
                    {title: "Sub-item 3.2.1", key: "id3.2.1" },
                    {title: "Sub-item 3.2.2", key: "id3.2.2" }
                ]
            }
        ] },
];
$(function(){
            $(".test").fancytree({
    //          extensions: ["select"],
                checkbox: true,
                selectMode: 3,
                source: treeData,
                select: function(e, data) {
                    // Get a list of all selected nodes, and convert to a key array:
                    var selKeys = $.map(data.tree.getSelectedNodes(), function(node){
                        return node.key;
                    });
                    $("#echoSelection3").text(selKeys.join(", "));
                    // Get a list of all selected TOP nodes
                    var selRootNodes = data.tree.getSelectedNodes(true);
                    // ... and convert to a key array:
                    var selRootKeys = $.map(selRootNodes, function(node){
                        return node.key;
                    });
                    $("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
                    //$("#echoSelectionRoots3").text(selRootNodes.join(", "));
                },
                //this is problematic one
                click: function(e, data) {
                   data.node.toggleExpanded();
                },
                keydown: function(e, data) {
                    if( e.which === 32 ) {
                        data.node.toggleSelected();
                        return false;
                    }
                },
                // The following options are only required, if we have more than one tree on one page:
    //              initId: "treeData",
                cookieId: "fancytree-Cb3",
                idPrefix: "fancytree-Cb3-"
            });
            $("#btnToggleExpand").click(function(){
                $(".test").fancytree("getRootNode").visit(function(node){
                    node.toggleExpanded();
        });
        return false;
    });
        });

问题

我尝试使用这部分代码来做到这一点:

click: function(e, data) {
               data.node.toggleExpanded();
            },

但问题是它也在选择上扩展了选择框的子项,我不想那样做。如果你展开一个节点,然后你尝试在左边箭头的帮助下打开另一个节点,第二个节点在单击箭头时会展开并隐藏,这不是我想要的。

您可以在此处查看和编辑情况:http://jsfiddle.net/9vAhZ/

所以你可能会说我陷入了某种"无路可走"的困境,我需要更聪明的人的帮助来告诉我如何解决这个问题,使用哪个事件,这样它就不会与花哨的默认行为发生冲突。

欢迎任何帮助或建议。

检查单击是否在选择按钮上

click: function(event, data) {
    var node = data.node,
        tt = $.ui.fancytree.getEventTargetType(event.originalEvent);
    if( tt === "checbox" ) {
        ...
    }
},

或者在 select 事件中实现这一点,而不是click .

拼写

if(tt = "checkbox"){
...
}