Easily build tree applications with the Jstree plugin

Easily build tree applications with the Jstree plugin

Recently completed a project in a tree-like application, the first contact with Jstree this plug-in, in general its official document is still more detailed, but in the use of the process still has some problems, I would like to talk about the use of this plugin and experience.

First the project needs to build a tree, using the Jstree plugin we first on the page to the static rendering of this tree, referring to the official document (http://www.jstree.com/), the code is as follows:

 1 <! DOCTYPE html> 2 
Now our data is completely dead through JS, real projects we need to send a request to the background to get rendering data, so we have to take advantage of Jstree's own encapsulated Ajax way, the code is as follows:
1     <script> 2         $ (function () {3             $ ("#jstree"). Jstree ({4                   "plugins": ["checkbox"], 5                   ' core ': {6                   ' data ': {7                     ' url ': '/usual/psd_demo_push/1/',//Request address 8                     ' data ': function (node) {9                       return {' id ': no De.id};10                     }11                   }12                 });     </script>
This plugin will then
'/usual/psd_demo_push/1/'
Send the request, the returned data and original we statically write dead in JS format is consistent, but it should be noted that this data must be a JSON object (object), if the returned JSON string (string) render the page will also fail, the problem
Very difficult to find, because through the browser to observe the two data is the same, when I use TypeOf to print out its format only to display the object can be rendered, and we can use the attributes must be provided by the official document, the additional attributes must be written in theli_attr或a_attr中，否则是取不到值的：
1 {2   ID          : "string"  3   Parent      : "String"  4   text        : "string"  5   icon        : " String "  6   State       : {7     opened    : Boolean   8     disabled  : Boolean   9     Selected  : Boolean   },11   li_attr     : {}   a_attr      : {}  13}
Just now we have a dynamic way to achieve the tree display, but if the server-side transmission of data is very large, we need to load the data asynchronously, Jstree also provides this function, in the JS code has been used, namely:
1 ' data ': function (node) {2       return {' id ': Node.id};3}
However, it is not feasible to test the method as described above, because in the form of data format, we only know the parent node of each node (parent), but we do not know whether there are child nodes under the node, So when we click on the parent node, there is no way to determine the number of sub-nodes under the node, you can not retrieve data from the background, by looking at the official documents and other information found that if you need to obtain data asynchronously, the format of the file must use the official provide the second form:
1 ' data ': [2        ' Simple root node ', 3        {4          ' text ': ' Root Node 2 ', 5          ' state ': {6            ' opened ': true, 7
    ' selected ': True 8          }, 9          ' children ': [ten            {' text ': ' Child 1 '},11            ' child 2 '          ]13       }14  ]
The ' Children ' attribute of each node is provided in this form of JSON, and if no child nodes are present, the backend provides ' children ' when there are child nodes: True is OK, When the node is clicked, the JSON content in children is dynamically rendered to the page, which realizes the asynchronous acquisition, which greatly reduces the amount of data transmitted by the page.
So the final recommendation is to use the second format, as follows:
1 {2   ID          : "string"  3   Text        : "string"  4   icon        : "String"  5   State       : {6     opened    : Boolean   7     disabled  : Boolean   8     selected  : Boolean   9   },10   children    : []  one   li_attr     : {}   a_attr      : {}  13}
The specific demo operation is also provided by the official address:
http://jsfiddle.net/vakata/2kwkh2uL/5/
You can debug it, look at the form and content of its data request, it will be of great help to use the plugin, and the official document also provides a very rich api,github:
Https://github.com/vakata/jstree#the-required-json-format
Category: jquery Tags: jquery, jstree
Easily build tree applications with the Jstree plugin