javascript - jQuery FancyTree, on click expand issue - Stack Overflow

admin管理员组

文章数量:1404571

I'm doing selection tree with help of FancyTree plugin and I'm trying to implement on click event which would work in way when you click on title of select box, all of his subitems and gets expanded in all levels.

To begin with... let me show you the script:

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

        });

ISSUE

I tried to do so with this part of code:

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

But the problem is that it expand subitems of selectbox on select too, and I do not wanna that. And if you expand one node, and you try to open another one with the help of arrows on left, that second node expands and hides on click to arrow, which is not what I want..

You can see and edit situation in here: /

So you migh said I got in some sort of "no way out" siutation and I need help from someone smarter to show me how could I sort this out, which event to use so it does not clashes it with fancytree default behaviour.

Any help or suggestion is wele.

I'm doing selection tree with help of FancyTree plugin and I'm trying to implement on click event which would work in way when you click on title of select box, all of his subitems and gets expanded in all levels.

To begin with... let me show you the script:

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

        });

ISSUE

I tried to do so with this part of code:

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

But the problem is that it expand subitems of selectbox on select too, and I do not wanna that. And if you expand one node, and you try to open another one with the help of arrows on left, that second node expands and hides on click to arrow, which is not what I want..

You can see and edit situation in here: http://jsfiddle/9vAhZ/

So you migh said I got in some sort of "no way out" siutation and I need help from someone smarter to show me how could I sort this out, which event to use so it does not clashes it with fancytree default behaviour.

Any help or suggestion is wele.

• javascript
• jquery
• fancytree

Share Improve this question Follow asked Oct 7, 2013 at 11:06 dzordzdzordz 2,3171414 gold badges5252 silver badges7575 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You check if the click was on select button

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

or implement this in the select event instead of click event.

spelling

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

本文标签： javascriptjQuery FancyTreeon click expand issueStack Overflow