All geek questions in one place

JsTree how to change ajax url and reload data

$('#jstree_demo_div2').jstree({ 'core': { 'data': { "url": "tree.ashx?id=" + _id, "dataType": "json" // needed only if you do not supply JSON headers } }, "checkbox": { 'visible': true, 'keep_selected_style': false, }, "plugins": ["wholerow", "checkbox"] });

I need to change the url (or the _id variable will change) and then update the data. But there seems to be a cache problem.

I tracked the HTTP request, the _id request _id not changed.

I tried

 'core': { 'data': { "url": "tree.ashx?id=" + _id, "cache":false, //←←←← "dataType": "json" // needed only if you do not supply JSON headers } },

and it didn’t work.

By the way, my version of jsTree.js is 3.0.8.

+5
source share
1 answer

I am using the following code to verify your use case. It updates jstree without folding the whole tree.

 <!DOCTYPE html> <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> var arrayCollection; $(function() { 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": "dalmatian", "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 }, "checkbox": { 'visible': true, 'keep_selected_style': false }, "plugins": ["wholerow", "checkbox"] }); }); function resfreshJSTree() { $('#jstree').jstree(true).settings.core.data = arrayCollection; $('#jstree').jstree(true).refresh(); } function addNokia() { var nokia = {"id": "nokia", "parent": "mobile", "text": "Nokia Lumia", "icon": "/"}; arrayCollection.push(nokia); resfreshJSTree(); } function deleteDalmatian() { arrayCollection = arrayCollection .filter(function(el) { return el.id !== "dalmatian"; }); resfreshJSTree(); } </script> </head> <body> <input type="button" onclick="addNokia()" value="Add Nokia"/> <input type="button" onclick="deleteDalmatian()" value="Delete Dalmatian"/> <div id="jstree"></div> </body> </html>
  • Note:
  • After opening the above page in a browser, open all jstree nodes and child nodes.
  • Click the Add Nokia button.
  • It will add Nokia Lumia node to node mobile phones without knocking down the tree to the root of the node.
  • Similarly, click the Remove Dalmaitian button.
  • And he will remove the Dalmatian node from Dogs node and update to display the new structure without collapsing to the root directory of the node.
+8
source

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

More articles:


All Articles