TreeView
遅延ロード
このビューは、子ノードを動的に TreeView にロードする方法を示します。
機能
サンプル
説明
大きな階層化データソースを扱う場合、データセット全体を 一度にロードする際の遅延を避けるには、遅延ロードが役立ちます。
TreeView コントロールは遅延ロードを極めて容易にしています。必要なステップは 1 つだけです。
- 「LazyLoadActionUrl」属性に、遅延ノードのデータを取得するための URL を設定します。 子ノードに子がある場合は、「"child-items-path」属性が表す名前のフィールドに空の配列を設定できます。 そうでない場合は、null にします。
遅延ロードを JavaScript で使用する場合は、TreeView の lazy-load-function 属性に、 ノードを展開したときに呼び出される関数を設定します。この関数は、2 つのパラメータとして、親ノードと、 データが利用可能になったときに呼び出されるコールバック関数を受け取ります。
次の例のツリーでは、最初に 3 つの遅延ロードノードが表示されます。 ノードを展開すると、lazy-load-function が呼び出されます。この関数は、 setTimeout を使用して http の遅延をシミュレーションし、3 つの子ノードのデータを返します。 その子ノードの 1 つも遅延ロードノードです。
この例では、いくつかの CSS を使用して、ロード中のノードアイコンをアニメーション 表示します。
ソース
LazyLoadingController.cs
using C1.Web.Mvc; using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; using C1.Web.Mvc.Serialization; namespace MvcExplorer.Controllers { partial class TreeViewController : Controller { private readonly C1NWindEntities _db; public TreeViewController(C1NWindEntities db) { _db = db; } // GET: LazyLoad public ActionResult LazyLoading() { return View(); } public ActionResult Load() { return this.C1Json(EmployeeEx.GetEmployees(null, _db.Employees), false); } public ActionResult LazyLoading_LoadAction([C1JsonRequest]TreeNode node) { var leaderID = (int?)node.DataItem["EmployeeID"]; return this.C1Json(EmployeeEx.GetEmployees(leaderID, _db.Employees), false); } } }
LazyLoading.cshtml
<c1-tree-view display-member-path="Name" child-items-path="SubExployees" load-action-url="@Url.Action("Load")" lazy-load-action-url="@Url.Action("LazyLoading_LoadAction")"></c1-tree-view> @section Summary{ <p>@Html.Raw(TreeViewRes.LazyLoading_Text0)</p> } @section Description{ <p>@Html.Raw(TreeViewRes.LazyLoading_Text1)</p> <p>@Html.Raw(TreeViewRes.LazyLoading_Text2)</p> <ul class="normal"> <li>@Html.Raw(TreeViewRes.LazyLoading_Li1)</li> @Html.Raw(TreeViewRes.LazyLoading_Text6) </ul> <p>@Html.Raw(TreeViewRes.LazyLoading_Text3)</p> <p>@Html.Raw(TreeViewRes.LazyLoading_Text4)</p> <p>@Html.Raw(TreeViewRes.LazyLoading_Text5)</p> }
マニュアル