lazy-loading - 延迟加载 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服务，该服务返回子域列表给定域实体 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);
        }
    });
}

请让我知道它是否有帮助或您有任何问题。