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

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>

回答1:

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

回答2:

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

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/5891697/how-to-open-close-nodes-on-double-single-click-in-jstree

标签

jquery

jstree