Details of jsTree events and interactions and plug-ins plugins, jstreeplugins

Details of jsTree events and interactions and plug-ins plugins, jstreeplugins

This article shares the jsTree events and interactions and plug-ins for your reference. The details are as follows:

1. Events

JsTree trigger variable events in the container, you can browse all events, and then learn how to listen: https://www.jstree.com/api? Q =. jstree % 20 Event

Use the data parameter to obtain more details about the event check.

In more cases, you will get all the node objects. If you get this node by ID, view the node using. get_node ().

$('#jstree')  // listen for event  .on('changed.jstree', function (e, data) {  var i, j, r = [];  for(i = 0, j = data.selected.length; i < j; i++) {  r.push(data.instance.get_node(data.selected[i]).text);  }  $('#event_result').html('Selected: ' + r.join(', '));  })  // create the instance  .jstree(); 

2. Interaction

To call a method in an instance, you must obtain the instance reference and call the method. This example shows how to obtain a reference and then retrieve a method.

Can you view the API to get more methods: https://www.jstree.com/api? Q = (

// 3 ways of doing the same thing $('#jstree').jstree(true)  .select_node('mn1'); $('#jstree')  .jstree('select_node', 'mn2'); $.jstree.reference('#jstree')  .select_node('mn3'); 

3. Plug-ins

Some jsTree functions are removed from the core and used only when necessary. To ensure the use of the plug-in, you need to use the plugins parameter configuration option to add the plug-in name to an array.

For example, make sure all plug-ins can be used: (you only need to set the plug-ins you need)

"plugins" : [  "checkbox",  "contextmenu",  "dnd",  "massload",  "search",  "sort",  "state",  "types",  "unique",  "wholerow",  "changed",  "conditionalselect" ] 

Quick preview of each plug-in

3.1. changed plugin (Change plug-in)

This plug-in adds additional information about selection changes. Once the plugins configuration option is included, each changed. jstree event data will contain a new attribute named changed, which will show the last event about the seleted and deselected nodes (changed. jstree)

$(function () {  $("#plugins")  .on("changed.jstree", function (e, data) {  console.log(data.changed.selected); // newly selected  console.log(data.changed.deselected); // newly deselected  })  .jstree({  "plugins" : [ "changed" ]  }); }); 

3.2.checked plugin (check box)

This plug-in will render the checkbox icon before each node, making it easier to select multiple nodes.

It also supports three States, which means that some subnodes of a node are selected, and the node will be rendered uncertain, which can be propagated. You can use cascade configuration options to fine-tune cascade options.

The remember Federation check box checks all nodes, even unavailable nodes.

The uncertainty state is automatically calculated, but if you are using AJAX to load the form tree and want to render a node as the uncertainty state by setting the attribute "undetermined": true.

Can you find the option https://www.jstree.com/api/#/ for all configuration check boxes in the API? Q = $. jstree. defaults. checkbox

$(function () {  $("#plugins1").jstree({  "checkbox" : {  "keep_selected_style" : false  },  "plugins" : [ "checkbox" ]  }); }); 

3.3 conditionalselect plugin (condition plug-in)

This plug-in overrides the activate_node function (that is, the function that will be called by the user to select a node). You can use callback to prevent this function from being called.

$(function () {  $("#plugins10").jstree({  "conditionalselect" : function (node, event) {  return false;  },  "plugins" : [ "conditionalselect" ]  }); }); 

3.4 (Contextmenu plugin) Context Menu plug-in
This plug-in is a function list menu that appears when you right-click a node.
You can use the API to find the configuration options of all the contextmenu plug-ins: Click to open the link

$(function () {  $("#plugins2").jstree({  "core" : {  // so that create works  "check_callback" : true  },  "plugins" : [ "contextmenu" ]  }); }); 

3.5 (drag & drop) drag plug-in

This plug-in can be dragged to re-change the tree structure.
You can find more configuration options through the API: Click the open link

3.6.Massloadplugin (inertial load plugin)
This plug-in loads nodes through a request (using delayed loading)
You can find more configuration options through the API: Click the open link

$(function () {  $("#plugins10").jstree({  "core" : {  "data" : { .. AJAX config .. }  },  "massload" : {  "url" : "/some/path",  "data" : function (nodes) {  return { "ids" : nodes.join(",") };  }  }  "plugins" : [ "massload", "state" ]  }); }); 

3.7. (search plugin) search plug-in
This plug-in can search for corresponding entries in a tree.
You can find more configuration options through the API: Click the open link

 $("#plugins4").jstree({  "plugins" : [ "search" ]  });  var to = false;  $('#plugins4_q').keyup(function () {  if(to) { clearTimeout(to); }  to = setTimeout(function () {  var v = $('#plugins4_q').val();  $('#plugins4').jstree(true).search(v);  }, 250);  }); }); 

3.8. sort plugin (sort plug-in)

This plug-in can re-Sort entries of the same level. By default, the order of numbers or 26 letters is used. You can configure the comparison function: Click to open the link.

$(function () {  $("#plugins5").jstree({  "plugins" : [ "sort" ]  }); }); 

3.9.state plugin)

This plug-in saves all open and selected nodes to the user's browser. Therefore, when the same tree is returned again, the previous status will be restored.
You can use the API to obtain more status plug-in configuration options: Click the open link, you can select a node, and then refresh the page to see the changes.

$(function () {  $("#plugins6").jstree({  "state" : { "key" : "demo2" },  "plugins" : [ "state" ]  }); }); 

3.10. types plugin (type plugin)

This plug-in pre-defines the type for a group of nodes, which means it is easy to control internal rules and icons for each group.
To set the node type, you can use set_type or provide a type attribute in data.
You can obtain