2017-02-10 69 views
0

使用jsTree 1.0-rc3

使用JS樹我有一個下拉精煉。這將設置加載到樹中的內容。但在每次調用時,樹會在不中止最後一次調用的情況下更新,因此,如果樹在新的調用之後返回,則可以讓樹顯示舊調用。

如何取消最後一次通話?

// On change, update tree 
$('#entitySelector1').change(function() { 
    .... 
    applyJstree(1); 
} 

var applyJstree = function(num) { 
    $('#ent{0}'.format(num)).jstree({ 
      "plugins" : ["themes","json_data","dnd","search","types","ui","contextmenu", "overlay", "hotkeys"], 
      "core" : { 
       "initially_open" : [ "tree{0}_root".format(num) ] , 
       "animation" : 100 
      },   
      "json_data" : { 
       "ajax" : { 
        "url" : function (currentNode) { 
         var currentEntity = $('#entitySelector{0}'.format(num)).val(); 
         var maxResults = treeSettings['ent{0}maxResults'.format(num)]; 

         if (currentNode === 'ent{0}_root'.format(num) || currentNode === -1){ 
          return 'treeAjaxServer.php?action=init&entityId=' + $('#entitySelector{0}'.format(num)).val() 
           + '&sort=' + treeSettings['ent{0}sortMode'.format(num)] 
           + '&sortDirection= ' + treeSettings['ent{0}sortDirection'.format(num)] 
           + '&needle=' + $('#search{0}'.format(num)).val() 
           + '&projectId=' + $('#projectFilter{0}'.format(num)).val() 
           + '&showChildCount=' + treeSettings['ent{0}childCount'.format(num)] 
           + '&maxResults='+maxResults; 
         } else { 
          return 'treeAjaxServer.php?action=branch&entityId=' 
           + $('#entitySelector{0}'.format(num)).val() + '&sort=' 
           + treeSettings['ent{0}sortMode'.format(num)] 
           + '&projectId=' + $('#projectFilter{0}'.format(num)).val() 
           + '&sortDirection= ' + treeSettings['ent{0}sortDirection'.format(num)] 
           + '&showChildCount=' + treeSettings['ent{0}childCount'.format(num)]; 
         } 
        }, 
        "data" : function (node) { 
         var currentEntity = $('#entitySelector{0}'.format(num)).val(); 
         var maxResults = treeSettings['ent{0}maxResults'.format(num)]; 

         if (node === -1){ 
          return {'prefix' : 'tree{0}_'.format(num),"maxResults" : maxResults}; 
         } else { 
          return { //Send this to the server with the ajax request 
           "prefix" : "tree{0}_".format(num), 
           "parentNodeId" : node.attr("id"), 
           "maxResults" : maxResults, 
           "showChildCount" : treeSettings['ent{0}childCount'.format(num)] 
          }; 
         } 
        } 
       } 
      } 
    }); 
} 

我後是我該如何更新數據源,並在多個呼叫的情況(經常發生)中止以前的調用。

+1

可我們看到你的代碼? –

回答

0

您將不得不緩存您的ajax調用,然後在每次啓動另一個調用時將其中止。

// On change, update tree 
$('#entitySelector1').change(function() { 
    .... 
    applyJstree(1); 
} 


var applyJstree = function(num) { 
    getAjaxDataForTree(num); 
} 


var xhr = false; 
function getAjaxDataForTree(num) { 
    if (xhr) { 
     xhr.abort(); // abort if ajax call is going on 
    } 

    // cache tree element to access it in the callback 
    var $jsTree = $('#ent{0}'.format(num)).jstree(); 

    // cache ajax call 
    xhr = $.ajax({ 
     type: ..., 
     url: ..., 
     success: function(data){ 
      $jsTree.settings.core.data = data; // update tree 
      $jsTree.refresh(); 
     } 
    }); 
} 

演示 - Fiddle Demo,但這是jsTree第3節