Question

使用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)]
                            };
                        }
                    }
                }
            }
    });
}

我之后是如何更新数据源，如果是多次通话（经常发生），则会中止之前的通话。

Answer 1

您必须缓存您的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 v.3

如何取消jsTree的最后一次调用（使用$ .jstree（））？

1 个答案: