CODEWITHSUNDEEP
jqueryjstree
Radek
Radek

Reputation: 11091

how to open/close nodes on double/single click in jsTree

how can I open/close nodes on double or single click of the node name? Like it works here the first tree sample - but there is used jsTree 0.9.8

-

<html>
<head>
<title> dashboard</title>

<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript" src="_lib/jstreegrid.js"></script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){

var data = [{
       data: "basics",
       attr: {SOF: "<a href=\"http://www.w3schools.com\">Visit W3Schools.com!</a>"},  
        children: [
         {data: "login", attr: {run: "run"},
           children: [                   
           {data: "login", attr: {}}
          ]
         } ,
         {data: "Academic Year", attr: {run: "run"},
          children: [                   
           {data: "login", attr: {}},
           {data: "Academic Year",  attr: {filter: "mini", SOF: "<a href=\"http://www.w3schools.com\">Visit W3Schools.com!</a>"}}
          ]

         }
        ]
      }];
$("div#jstree").jstree({
plugins: ["themes","json_data","grid","dnd"],
json_data: {data: data},
grid: {
        columns: [
          {width: 220, header: "Group"},
                        {cellClass: "col2", value: "run", width: 40, header: "run"},
                        {cellClass: "col3", value: "filter", width: 40, header: "filter"},
                        {cellClass: "col4", value: "SOF", width: 450, header: "SOF"}
                ]
            },
dnd: {
drop_finish : function () {
},
drag_finish : function () {
},
drag_check : function (data) {
return {
after : true,
before : true,
inside : true
};
}
}
});
});
//]]>
</script>
</head>
<body>
<div id="jstree"></div>

</body>
</html>

Upvotes: 6

Views: 14631

Answers (4)

user2636594
user2636594

Reputation: 

$('#domainvariants').jstree({
    plugins : ["themes","html_data","ui","crrm"]
}).bind("select_node.jstree", function (event, data) {
    return data.instance.toggle_node(data.node);
});

Upvotes: 0

Alex Pollan
Alex Pollan

Reputation: 873

In addition to the correct answer from TK...

This solution will break the navigation when you click on tree items with href attribute (set by JSON, XML data or directly in HTML).

To solve this problem, in the leaf configured "types" (where anchors must trigger navigation) set this handler:

"select_node": function (e) {
   document.location = e.children("a").attr("href");
   return false;
}

Upvotes: 2

TK Gospodinov
TK Gospodinov

Reputation: 8452

One way is to enable the types and ui plugins and define a select_node event handler on the default type like so:

   $(element)
        .jstree({ 
            "types" : { 
                "types" : { 
                    "default" : { 
                        "select_node" : function(e) {
                                            this.toggle_node(e);
                                            return false;
                                        } 

                    }
                } 
             },
             "plugins" : [ "themes", "html_data","types", "ui" ] });

Upvotes: 11

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18344

Dont you have to add the clickable: [...] option when creating your tree?

Upvotes: 1

Related Questions