All geek questions in one place

How to open / close nodes by double / one click in jsTree

How can I open / close nodes on a double or single click on the node name? How the first tree example works here - but using 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>
+6
source share
4 answers

One way is to enable types and ui plugins and define the select_node event handler by default type, for example:

  $(element) .jstree({ "types" : { "types" : { "default" : { "select_node" : function(e) { this.toggle_node(e); return false; } } } }, "plugins" : [ "themes", "html_data","types", "ui" ] });
+11
source

In addition to the correct answer from TK ...

This solution will disrupt navigation when clicking on tree elements with the href attribute (set by JSON, XML data, or directly in HTML).

To solve this problem, in sheets configured with "types" (where the anchors should start navigation), install this handler:

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

Is it necessary to add a clickable: [...] parameter when creating a tree?

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

Source: https://habr.com/ru/post/887325/

More articles:


All Articles