Jstree using record instances _javascript tips

1. Ajax request Generation Jstree

[JavaScript] View plain copy <span style= "FONT-SIZE:14PX;" ><script> var r = []; 
 The selected leaf node in the permission tree var currentgroupid; 
 function Showpermittree (id) {currentgroupid = ID; $.ajax ({data: "currentgroupid=" + ID, type: "POST",//datatype: ' json ', url: "/test/permittree", Error:fu Nction (data) {alert ("Error!!) 
 : "+ data); 
  }, Success:function (data) {//alert ("success:" + data); 
 Createpermittree (data); 
 } 
 }); 
 ${' buttondiv '}.style.display= ' "; 
 function Createpermittree (datastr) {datastr = eval ("" + Datastr + ""); $ (' #permitTree '). Jstree ({' Plugins ': ["Wholerow", "checkbox", "Types"], ' core ': {"Themes": {"responsive" : false}, ' Data ': Datastr}, "types": {"default": {"icon": "FA fa-folder icon-state-warning ICON-LG 
 "}," file ": {" icon ":" FA fa-file icon-state-warning Icon-lg "}}); //Listen for event $ (' #permitTree '). On (' Changed.jstree ', function (e, data) {r = []; 
 var i, J; 
 for (i = 0, j = data.selected.length I < J; i++) {var node = Data.instance.get_node (Data.selected[i)); 
 if (data.instance.is_leaf (node)) {R.push (node.id); 
 }//alert (' Selected: ' + r.join (' @@ ')); }) function Savetree () {$.ajax {data: {' currentgroupid ': currentgroupid, ' selectednodes ': R.join (' @@ ')}, T ype: "POST",//datatype: ' json ', url: "/test/savetree", error:function (data) {alert ("Wrong!!"). 
 : "+ data); 
 }, Success:function (data) {alert ("Save successful!"); 
 } 
 }); } </script></span><span style= "FONT-SIZE:24PX;"  > </span>

Just copy a piece of code from the test project, which is a tree with a check box. Page has a place to click after the trigger Showpermittree (ID) function, send Ajax request to the background, the project is using the SPRINGMVC framework, back to jsonarray.tostring background.

2. Jstree Change Event

The above code contains the Change event. Put the IDs of all the selected nodes in an array.

There is a button on the page, click to trigger the Savetree function, send a request to the background, the selected node ID sent to the background.

3.jsTree Custom ContextMenu

[JavaScript] View plain copy <script> $ (' #jstree '). Jstree ({core: {check_callback:true, data: [{) id  ":" 1 "," Parent ":" # "," text ":" Root "}, {" id ":" 2 "," Parent ":" 1 "," text ":" Child 1 "}, {" id ":" 3 "," Parent "  : "1", "text": "Child 2"},}, plugins: ["Wholerow", "ContextMenu"], "ContextMenu": {"items": {"Create": NULL, "rename": null, "Remove": null, "CCP": null, "Add": {"label": "Add", "Action": function (obj) {V 
  Ar Inst = jQuery.jstree.reference (obj.reference); 
  var clickednode = Inst.get_node (obj.reference); 
  Alert ("Add Operation--clickednode ' s ID is:" + clickednode.id); }, "delete": {"label": "Delete", "Action": function (obj) {var inst = jQuery.jstree.reference (obj.referen 
  CE); 
  var clickednode = Inst.get_node (obj.reference); 
  Alert ("Delete Operation--clickednode ' s ID is:" + clickednode.id); 
}}}). On ("Ready.jstree", function (E, data) {Data.instance.open_all (); 
});</script>  

This code uses Jstree's ContextMenu plugin, removes Jstree's own menu, and customizes the menu

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!