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>
}
マニュアル