All geek questions in one place

Create dynamic jstree using an alternative JSON format stored in an array

I can create jstree using an alternative JSON format as shown below:

$('#using_json_2').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ] } });

But it is quite static. I want it to be dynamic; in the sense that the number of rows can be variable, and the row properties must be read from the array. I do not want to use ajax as the data is already available in the array.

+2
source share
2 answers

If you want your data to be dynamic, you can use the following code to initialize jstree:

 $('#jstree').jstree({ 'core': { 'data': arrayCollection } });

where arrayCollection is a variable that binds your dynamic array. For example, your arrayCollection might look like this:

 var arrayCollection = [ {"id": "animal", "parent": "#", "text": "Animals"}, {"id": "device", "parent": "#", "text": "Devices"}, {"id": "dog", "parent": "animal", "text": "Dogs"}, {"id": "lion", "parent": "animal", "text": "Lions"}, {"id": "mobile", "parent": "device", "text": "Mobile Phones"}, {"id": "lappy", "parent": "device", "text": "Laptops"}, {"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"}, {"id": "Dalmation", "parent": "dog", "text": "Dalmatian", "icon": "/"}, {"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"}, {"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"}, {"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"}, {"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"}, {"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"}, {"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"} ];

Finally, your html file should look like this:

 <html> <head> <title>JSTree</title> <link rel="stylesheet" href="dist/themes/default/style.css" /> <script src="dist/libs/jquery.js"></script> <script src="dist/jstree.js"></script> <script> $(function() { var arrayCollection = [ {"id": "animal", "parent": "#", "text": "Animals"}, {"id": "device", "parent": "#", "text": "Devices"}, {"id": "dog", "parent": "animal", "text": "Dogs"}, {"id": "lion", "parent": "animal", "text": "Lions"}, {"id": "mobile", "parent": "device", "text": "Mobile Phones"}, {"id": "lappy", "parent": "device", "text": "Laptops"}, {"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"}, {"id": "Dalmation", "parent": "dog", "text": "Dalmatian", "icon": "/"}, {"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"}, {"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"}, {"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"}, {"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"}, {"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"}, {"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"} ]; $('#jstree').jstree({ 'core': { 'data': arrayCollection } }); }); </script> </head> <body> <div id="jstree"></div> </body> </html>

Whenever an arrayCollection changes, you must reassign the arrayCollection to jstree and programmatically update jstree.

+11
source 
 var fullMenuList = [ {"id": "1000", "parent": "#", "text": "PARENT"} ]; $http({ method: 'POST', url: 'Jtree.do', params: {} // pass in data as strings }).then(function (response) { console.log(response.data[0].Code1); console.log(response.data[0].Menu); console.log(response.data[0].Groupcode); for (var i = 0; i < response.data.length; i++) { fullMenuList.push({id: response.data[i].Code1, parent: response.data[i].Groupcode, text: response.data[i].Menu }); } $('#jstree').jstree({ "checkbox": { "keep_selected_style": false }, // "plugins": ["checkbox"], 'core': { 'data': fullMenuList } }); });
0
source

Source: https://habr.com/ru/post/1206149/

More articles:


All Articles