Question

我正在FancyTree插件的帮助下做选择树，我正在尝试实现点击事件，当你点击选择框的标题，他所有的子项目并在所有级别进行扩展时，这将会有效。< / p>

首先......让我告诉你剧本：

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();
            },

但问题是它也会选择selectbox的子项目，我不想这样做。如果你扩展一个节点，并尝试在左边的箭头的帮助下打开另一个节点，那么第二个节点会扩展并隐藏点击箭头，这不是我想要的......

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

所以你很高兴说我得到了某种“没有出路”的语言，我需要更聪明的人的帮助，告诉我如何解决这个问题，使用哪个事件，所以它不会与fancytree默认行为冲突

欢迎任何帮助或建议。

Answer 1

您检查点击是否在选择按钮上

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

或在select事件中实现此操作，而不是click。

Answer 2

拼写

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

jQuery FancyTree，点击扩展问题

2 个答案: