Lazy загрузка дочерних узлов дерева Wijmo

Question

Как можно лениво загрузить дочерние узлы Wijtree? Сначала изначально только родительские узлы верхнего уровня будут загружены при помощи вызова сервера AJAX (метод $ .getJSON()). Когда пользователь расширяет родительский узел (событие nodeExpanded), его дочерние узлы будут загружены, сделав другой вызов сервера AJAX, чтобы получить дочерние узлы для расширенного родительского узла. Целью такой ленивой загрузки является лучшая производительность при рендеринге дерева. Образец кода будет высоко оценен.

Answer 1

Я смог реализовать ленивую загрузку в дереве Wijmo следующим образом: Сначала в дерево Wijmo загружаются только узлы дерева на самом верхнем уровне иерархии. Однако, поскольку ни один из узлов не будет иметь дочерний узел, значок расширения узла не появится слева от узлов и, следовательно, узлы не могут быть расширены. Чтобы решить эту проблему, дочерний узел «фиктивный» добавляется к каждому узлу верхнего уровня, так что теперь они становятся родительскими узлами, и, следовательно, появляется значок расширения узла, который можно щелкнуть, чтобы показать дочерние узлы. При расширении родительского узла дочерний узел «фиктивный» удаляется, а фактические дочерние узлы загружаются под родительским узлом. Эта стратегия может быть реализована для любого количества вложенных дочерних узлов, у которых есть дочерние узлы.

Вот мой пример кода с помощью AngularJS, но это можно реализовать с помощью jQuery, следуя той же логике.

Посмотреть код:

<div data-ng-controller="DomainCtrl">  
    <div id="domainEntitiesTreeView"> 
     <wij-tree id="wijtree" nodes="treeList"> 
      <ul> 
      </ul> 
     </wij-tree> 
    </div> 
</div> 

AngularJS контроллер код:

//Global array to store domain entity ids 
var domainEntityIdList = []; 
var REST_SERVICE_URL = 'http://DevServer1/MyApplication/Api/DomainEntities'; 

function DomainCtrl($scope, $http) { 
    var domainEntityList = []; 
    //AJAX call to the RESTful service to get list of domain entities 
    $http({ method: 'GET', url: REST_SERVICE_URL }) 
     .success(function (data) { 
      $(data).each(function (i, val) { 
       var domainEntity = data[i]; 
       var domainEntityId = domainEntity.Id; 
       //Keep the domain entity ids in array for later use 
       domainEntityIdList.push(domainEntityId); 

       var domainEntityName = domainEntity.Name; 
       var treeNodes = [{ text: "" }]; //dummy child node 
       domainEntityList.push({ 
        text: domainEntityName, 
        nodes: treeNodes // dummy child node added to each node 
       }); 
      }) 
     //Model for the tree 
     $scope.treeList = domainEntityList; 
     }) 
     .error(function (data, status) { 
      alert('Unable to load data: ' + status); 
     }); 
} 

Каждый родительский узел здесь (представляющий домен объект) должен быть присвоен соответствующий домен идентификатор объекта, так что разлагая узел, мы можем получить и передать идентификатор объекта домена в качестве параметра службе RESTful, которая возвращает список сущностных сущностей для данного идентификатора объекта домена. Эти сущностные сущности затем добавляются как дочерние узлы в расширенный узел. Код ниже:

Код для ребенка по требованию узлы загрузки:

$(document).on("ready", function (e) { 
    $("#wijtree").wijtree({ 
     autoCollapse: true, 
     showExpandCollapse: true, 
     //nodeExpanded event is triggered on expanding a domain entity node 
     nodeExpanded: function (e, data) { 
      AssignNodeId(); 
      LoadChildNodesOnDemand(e, data); 
     } 
    }); 
}); 

function AssignNodeId() { 
    //Assign each node's (li) id attribute to domain entity id 
    $("#wijtree li").each(function (index) { 
     $(this).attr("id", domainEntityIdList[index]); 
    }); 
} 

function LoadChildNodesOnDemand(e, data) { 
    var node = data.element; 

    //First remove the dummy child node that was added in each node of the tree 
    var nodes = node.wijtreenode("getNodes"); 
    $(nodes).each(function() { 
     node.wijtreenode("remove", 0); 
    }); 

    var domainEntId = node.attr("id"); 






    //RESTful service URL for getting the sub domain entities for a given domain entity id. In production-ready application, the URL should not be hardcoded and should come from constant file 
    var SUBDOMAIN_SERVICE_URL = 'http://DevServer1/MyApplication/Api/SubDomainEntities?domainEntityId=' + domainEntId; 

    //AJAX call to the RESTful service to get list of sub domain entities 
    $.ajax({ 
     url: SUBDOMAIN_SERVICE_URL, 
     success: function (data) { 
      $(data).each(function (index, val) { 
       var subDomainEntity = data[index]; 
       //Add the subentity as a child node 
       node.wijtreenode("add", subDomainEntity.Name, index); 
       //Get the newly added child node and assign its id to Sub Domain Entity Id 
       var childNode = nodes[index].element; 
       childNode.attr("id", subDomainEntity.Id); 
      }); 
     }, 
     error: function (data, status) { 
      alert('Unable to load data: ' + status); 
     } 
    }); 
} 

дайте мне знать, если это помогает или если у вас есть какие-либо вопросы.