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

请告诉我它是否有帮助，或者如果您有任何疑问。

延迟加载Wijmo树子节点

1 个答案: