Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

jquery

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

  • Using jsTree 1.0rc2

-

<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>
like image 552
Radek Avatar asked May 05 '11 01:05

Radek


2 Answers

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" ] });
like image 56
TK Gospodinov Avatar answered Nov 15 '22 01:11

TK Gospodinov


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;
}
like image 37
Alex Pollan Avatar answered Nov 15 '22 00:11

Alex Pollan