0

Wijtree の子ノードを遅延ロードするにはどうすればよいですか? つまり、AJAX サーバー呼び出し ($.getJSON() メソッド) を行うことによって、最初はトップレベルの親ノードのみがロードされます。ユーザーが親ノードを展開すると (nodeExpanded イベント)、展開された親ノードの子ノードを取得するために別の AJAX サーバー呼び出しを行うことによって、その子ノードが読み込まれます。このような遅延読み込みの目的は、ツリーのレンダリングのパフォーマンスを向上させることです。サンプルコードは高く評価されます。

4

1 に答える 1

2

以下の方法で 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);
        }
    });
}

それが役立つかどうか、または質問がある場合はお知らせください。

于 2013-11-13T15:04:13.783 に答える