延迟加载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);
        }
    });
}

如果有帮助，或者你有什么问题，请告诉我。