CODEWITHSUNDEEP
jquerycheckboxjstree
Bob
Bob

Reputation: 3084

JSTree select_node event and checkbox

I have a jstree in which I used the select_node event to toggle nodes(expand), and have therefore removed the toggle arrows in the tree since they look ugly and I've no need for them.

Now I've added the checkbox plugin to use within the tree, but have found the select_node event is disabled when the plugin is active.

How would I toggle my nodes with the checkbox plugin active, without re-adding the ugly toggle arrows? I could do it in the check/uncheck event, but I don't want to check/uncheck everytime I expand a node.

Upvotes: 1

Views: 6606

Answers (3)

Bob
Bob

Reputation: 3084

The latest version of jstree now allows for both checking and selecting node separately by either clicking on the check box or the node title.

Upvotes: 2

guido
guido

Reputation: 19224

Say you have the example tree as in http://www.jstree.com/documentation/checkbox, with arrows removed. You cant execute both a checkbox selection and branch toggling, on a click event, without disrupting ui interaction. But, as non-leaf nodes don't carry model data (their checkboxes only serve as select-all/deselect-all function), you could remove the checkboxes from them, redefining the click events over them as "toggle_node", while leaving the rest unthouched.

You can remove the checkboxes on non-leaf li nodes and make a click event on them toggle the leaves. That would accomplish your desired behaviour, but will remove the "select all/deselect all" functionality of non-leaf nodes checkboxes.

Just add the lines below marked with "+", on the sample page.

    $("#demo1").jstree({ 
       "plugins" : [ "themes", "html_data", "checkbox" ]
    });

+    $("#demo1 li").not(".jstree-leaf").each(function() {
+       $("a ins.jstree-checkbox", this).first().hide();
+       $("a", this).first().click(function(event) {
+          $("#demo1").jstree("toggle_node", "#"+$(this).parent().attr('id'));
+          event.stopPropagation();
+          event.preventDefault();
+       });
+    });

Upvotes: 2

Ivan Hušnjak
Ivan Hušnjak

Reputation: 3503

JsTree offers style themes so you can define your own and load it. You simply need to replace the sprite image and that's pretty much that.

Upvotes: 2

Related Questions