jsTree ajax URL을 변경하고 데이터를 새로 고치는 방법

$('#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"] 
    });

URL (또는 변수 _id 변경 예정)을 변경하고 데이터를 새로 고침해야합니다. 그러나 캐시 문제가있는 것 같습니다.jsTree ajax URL을 변경하고 데이터를 새로 고치는 방법

요청 요청 매개 변수 _id이 변경되지 않았습니다.

나는

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

을 시도하고 그것은 작동하지 않았다.

BTW, 내 jsTree.js 버전은 3.0.8입니다.

출처

2014-11-04 wtf512

그리고 beform 나는'$ id '('# jstree_demo_div2 ') jstree ('refresh ');를 사용하여 데이터를 재구 축하려고하면'_id' 매개 변수가 변경되었습니다. – wtf512

이 도움이 되길 바랍니다. http://stackoverflow.com/questions/26270239/creating-dynamic-jstree-using-alternative-json-format-stored-in-array/26299310#26299310 ajax가 반환 한 json을 arrayCollection 변수에 저장할 수 있습니다. –

정상적인 jquery ajax 호출을 만들고 새 URL로 ajax 호출을 할 때마다 arrayCollection에 응답을 할당하고 다음과 같이 트리를 새로 고칩니다. $ ('# jstree') .jstree (true) .settings.core.data = arrayCollection ; $ ('# jstree'). jstree (true) .refresh(); –

다음 코드를 사용하여 사용 사례를 테스트하고 있습니다. 전체 나무를 무너 뜨리지 않고 jstree를 상쾌하게합니다.

<!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>

참고 :
브라우저에서 위의 페이지를 연 후, 모든 노드와 jstree의 자식 노드를 엽니 다.
Nokia 추가 버튼을 클릭하십시오.
트리를 루트 노드로 축소하지 않고 Nokia Lumia 노드를 휴대폰 노드에 추가합니다.
마찬가지로 Dalmaitian 버튼 삭제를 클릭하십시오.
그리고 Dogs 노드에서 달마 시안 노드를 삭제하고 트리를 새로 고침하여 루트 노드로 접히지 않고 새 구조를 표시합니다.

출처

2014-11-17 06:52:49

질문에 답하는 코드는 단지 'resfreshJSTree'의 내용입니다. 기능. jstree (true) .settings.core.data = 'put/the/url/here.json';'$ ('# jstree') .jstree (true) .refresh ('); –

나를 위해 일한 것 : $ ('# jstree') .jstree (true) .settings.core.data = { 'url': 'put/the/url/here.json'}; ' –

$ ('# jstree') .jstree (true) .settings.core.data.url = 'put/the/url/here.json'; –

jsTree ajax URL을 변경하고 데이터를 새로 고치는 방법

답변

관련 문제