Jstree implements a simple crud

Now it is necessary to make the area of the city and county of the shape of the tree, because the project uses the ANGULARJS+ABP+WEBAPI between the data transmission form is the JSON format, then for the jstree is much more convenient, Only the JSON data needs to be made into the nested form of data storage that we jstree need.

Jstree official Address

Https://github.com/vakata/jstree#the-required-json-format

This inside has the operation Jstree all contents, only need to be inside the small example to understand, basically will not have the question. The good point is that there is someone's home practice, understanding is very strong, only need to run.

Note: The relevant JS file needs to be referenced. This is very clear from the author of GitHub, and we can do it directly.

HTML page

A specified ID value is required to display the data in our JS file.

      <div class= "Portlet-body" >            <div id= "Areastree" ></div>      </div>

JS Page

        App.controller (' Areasctrl ', function ($http, $scope, systemsetting) {$http. Get (' Api/areas/all '). Then (f                    Unction (response) {if (response.data) {console.log (response.data); $ (' #areasTree '). Jstree ({' core ': {' data ': response.data,// The returned data, array "Themes": {"dots": true,//No Connectin                            G dots between dots "responsive": false//no response},          ' Multiple ': false,//set to no More ' check_callback ': true,                                         Set it to true. You can modify the text.                                }, ' types ': {//Here is the picture's display format "default": {       "icon": "FA fa-folder tree-item-icon-color icon-lg"                     }, "file": {"icon": "FA fa-file tree-item-                       Icon-color Icon-lg "}}, ' Plugins ': [                            Plugin, below is the plugin function ' types ',//can set its icon on the same as above.                            ' ContextMenu ',//Text menu ' Wholerow ',// ' Sort ',//category ' unique '//distinctive----prevent duplication.                    (newly added)]                });        }            }); });

Through the HTML get method we can get the complete JSON data from the background, as follows:

Then we will explain the above content.

' Core ': Central area, which is primarily data and themes. The logic of our business is also here. Some of the functions are commented, you can read them.

' Types ' Here is a picture of the following plugin, which is a picture of our previous tag.

' Plugins ' is the plugin area. You can customize the plugin here. There are examples below the documentation. Plugin section we can see the following several.

• Types: Set icon that corresponds to the one above.
• ContextMenu: Text content menu, that is, you can have the right key attributes, additions and deletions to change the search.
• Sort: Classification.
• Unique: Prevents duplication.
• DND: You can move the label.

There are many more features in the documentation. Here we need to take note of ContextMenu and DND, both of which we need to set their ' check_callback ' in the core: true so that labels can be manipulated and moved.

Achieve results

The following is a tree-like style that provides JSON data through the background.

Now that we've set up the ContextMenu, that means we have right-click functionality, as follows

So how can I respond to this, such as when I click Add, how do I get the data and how to send it back to the background?

Implementing a right-click response

The things on our interface come out, so how can we achieve the response. We found the following sentence in the official documentation.

"core.check_callback"can also be set to a function, that'll be invoked every time a modification was about to happen (or if jstree needs to Check if a modification is possible). If you return true the operation would be allowed, a value of false means it won't be allowed. The possible operation you can expect is create_node , rename_node , delete_node , move_node and copy_node . The more parameter would contain various information provided by the plugin, which is invoking the check. For example the DND plugin would provide an object containing information about the move or copy operation so is being CH Ecked-is it a multi tree operation, which node is currently hovered, where the insert arrow was pointing-before, after or inside, etc.

In fact, the meaning is that we can use the anonymous function here to set up, see the bottom of what we chose on the front end is that operation.

           ' Check_callback ': function (operation, node, parent, position, more)       {          

              if (Operation = = = ' Create_node ') {                   console.log (parent.text);                        

                   Console.log (' Create test ');                                      

             }            if (operation = = = ' Delete_node ') {                   console.log (node.text);                    Console.log (position);                   Console.log (' delete test ');             }            if (Operation = = = ' Rename_node ') {                  //console.log (parent.text);                    Console.log (position);                    Console.log (node.text);                      Console.log (' rename test ');             }             Console.log (' test area ');             return true;       },    

By adding anonymous functions here, we can implement some of the actions shown. We'll change the Yanta to 123 to see if we've triggered the anonymous function we set.

Before modification:

After modification:

Here is the value of the node that was printed, and you can see that it is an object.

By comparing the above, we can find that the anonymous function we set has been successfully triggered, and we can see that the parameters here have some special effects. Analyze the parameter Operation,node,parent,position,more in this function.

• Operation: This is what we chose to do with the right button. is delete, add, move, modify etc.
• Node: Represents the value of the current object, which holds some properties inside the node.
• Parent: Represents the Parental Class node object.
• Position: Represents the text value of the current node. For example, our 123 is the reason for printing position in the background.
• MORE: This can not be printed out now, do not know what to do with.

Now that we know the difference between each parameter, we can use operation to see what we've chosen, and then we can make a POST request in the appropriate area, whether it's deleted or added.

Let's just test a delete. Take me up here. You need to make a request operation in the selected area of the deletion.

             if (Operation = = = ' Delete_node ') {             var url= ' api/areas/delete?id= ' +node.id;             $http. Get (URL)                  . Then (function (response) {                      console.log (response.state);

                      Console.log (' deletion succeeded ');            });              Console.log (Node.text);

              Console.log (position);              Console.log (' delete test ');            }

So we can interact with the background.

Jstree implements a simple crud