Simple examples of jstree _javascript techniques

Recently used to the Jstree, the feeling is a flexible, can be a number of customized tree plug-ins;

My side uses the process to record;

Reference to the Jstree API Web site, as well as demo introduction:

https://www.jstree.com/api/
Jstree API GitHub:
Https://github.com/vakata/jstree

Examples in use are:

HTML code:

<!--search box--> 
 <div class= "Search_input" > 
 <input type= "text" id= "Search_ay"/> 
  
 </div> 
<!--list--> 
<div class= " Reason_list "> 
 <div id=" TreeView1 "class=" TreeView "> 
 </div> 
 

JS Code:

1) Generate Jstree:

$ ("#treeview1"). Jstree ({ 
  ' core ': { 
  "multiple": false, 
  ' data ': Ay_mssys, 
  ' Dblclick_toggle ': false  //Disable tree's double-click expansion 
  }, 
  "plugins": ["Search"] 
}); 
var ay_mssys = 
 [ 
 { 
  "id": "1", 
  "text": "Civil Case (version 2008)", 
  "state": { 
   "opened": true,  / /Show node "disabled" below the first level 
   : True  //The root node is not clickable 
   }, 
  "Children": 
   [ 
    { 
    "id": "2", 
    "text": "Personality right dispute", 
    "Children": 
     [ 
      { 
      "id": "3", 
      "text": "Personality right dispute", 
      "Children": [ 
       { 
       "id": "4", " 
       text": "Life right, health right, body right dispute", 
       "Children": 
         [ 
         { 
          "id": "5", 
          "text": " Road Traffic Accident Personal injury compensation dispute "}]}] 
 
// Core: The heart of the entire jstree display, which includes a variety of item configurations: 
//data: Here is data in JSON format, or HTML or AJAX requests 
//plugins: What Plug-ins does this jstree refer to? 

2 Click each subkey of Jstree to get the text, ID and other information of the node:

Event 
$ (' #treeview1 ') when tree change is. On ("Changed.jstree", function (E, data) { 
 Console.log ("The selected nodes are :"); 
 Console.log (data.node.id);  The Node ID 
 console.log selected (data.node.text);  The selected node text 
 form_data.ay = data.node.text; 
 form_data.ay_id = data.node.id; 
}); 

3) Click Jstree, Control the node expansion, contraction, etc.:

Jstree Click event 
$ ("#treeview1"). Bind ("Select_node.jstree", function (E, data) { 
 if (data.node.id!=1) {    / /Exclude the first node (2011 civil case) 
 Data.instance.toggle_node (Data.node);//Click to expand the following node 
 } 

4 Using the plugin search (jstree):

Input box input timing automatically search 
var to = false; 
$ (' #search_ay '). KeyUp (function () { 
 if (to) { 
 cleartimeout; 
 } 
 
 to = settimeout (function () { 
 $ (' #treeview1 '). Jstree (True). Search ($ (' #search_ay '). Val ()); 
 
 }, 250; 

The above is the entire content of this article, I hope to help you, but also hope that a lot of support cloud Habitat community!