懒惰地加载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);
        });
}

这里的每个父节点（代表域实体）都需要分配相应的域实体id，这样在扩展节点时，我们可以获得域实体id并将其作为参数传递给RESTful服务，RESTful服务返回给定域实体id的子域实体列表。然后，这些子域实体作为子节点添加到扩展节点中。以下代码：

按需加载子节点的代码：

$(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);
        }
    });
}

如果它有帮助，或者你有任何问题，请告诉我。