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

Мне удалось реализовать ленивую загрузку в дереве 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);
        }
    });
}

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