TreeView
概要
このビューは、TreeView for ASP.NET MVC の基本機能を示します。
機能
サンプル
設定
説明
TreeView コントロールは、テキスト、チェックボックス、画像、または任意の HTML コンテンツから成る階層リストを表示します。 通常、TreeView は、階層として表示すると便利なドキュメントの見出し、 インデックス項目、ディスク内のファイルやディレクトリ などの情報を表示するために使用されます。
ツリーを作成するには、通常 3 つの属性を設定する必要があります。
- source これは、階層化データを含む配列です。配列の各項目には、ノードおよび(オプションで)子ノードの配列に関する情報が含まれます。
- display-member-path ツリーノードに表示されるテキストを含む、項目内のプロパティの名前を定義します。デフォルトでは、このプロパティは文字列「header」に設定されています。
- child-items-path 子ノードの配列を含む、項目内のプロパティの名前を定義します。デフォルトでは、このプロパティは文字列「items」に設定されています。
ノード画像、チェックボックスをSource配列に連結するためにImageMemberPathとCheckedMemberPathプロパティ、およびツリービューの動作をカスタマイズするためにIsAnimated、AutoCollapse、ExpandOnClick、CollapseOnClick、ExpandOnLoad、CollapseWhenDisabledプロパティもあります。
ソース
IndexController.cs
using MvcExplorer.Models;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
using System.Collections.Generic;
using Microsoft.AspNetCore.Http;
namespace MvcExplorer.Controllers
{
public partial class TreeViewController : Controller
{
// GET: Index
public ActionResult Index(IFormCollection collection)
{
_treeViewDataModel.LoadPostData(collection);
ViewBag.DemoOptions = _treeViewDataModel;
return View(Property.GetData(Url));
}
private readonly ControlOptions _treeViewDataModel = new ControlOptions
{
Options = new OptionDictionary
{
{"IsAnimated",new OptionItem{Values = new List<string> { "True", "False"},CurrentValue = "True"}},
{"AutoCollapse", new OptionItem{Values = new List<string> { "True", "False"},CurrentValue = "True"}},
{"ExpandOnClick",new OptionItem{Values = new List<string> { "True", "False"},CurrentValue = "True"}},
{"CollapseOnClick",new OptionItem{Values = new List<string> { "True", "False"},CurrentValue = "False"}},
{"ExpandOnLoad",new OptionItem{Values = new List<string> { "True", "False"},CurrentValue = "True"}},
{"CollapseWhenDisabled",new OptionItem{Values = new List<string> { "True", "False"},CurrentValue = "True"}}
}
};
}
}
Index.cshtml
@model Property[]
@{
ControlOptions optionsModel = ViewBag.DemoOptions;
ViewBag.DemoSettings = true;
}
<c1-tree-view display-member-path="Header" child-items-path="Items" id="treeView"
source="Model"
is-animated="@Convert.ToBoolean(optionsModel.Options["IsAnimated"].CurrentValue)"
collapse-when-disabled="@Convert.ToBoolean(optionsModel.Options["CollapseWhenDisabled"].CurrentValue)"
auto-collapse="@Convert.ToBoolean(optionsModel.Options["AutoCollapse"].CurrentValue)"
expand-on-click="@Convert.ToBoolean(optionsModel.Options["ExpandOnClick"].CurrentValue)"
collapse-on-click="@Convert.ToBoolean(optionsModel.Options["CollapseOnClick"].CurrentValue)"
expand-on-load="@Convert.ToBoolean(optionsModel.Options["ExpandOnLoad"].CurrentValue)">
</c1-tree-view>
<div>
<button id="btnDisableNode" class="btn btn-default" onclick="disableSelectedNode()">
Disable Selected Node
</button>
<button id="btnEnableAllNodes" class="btn btn-default" onclick="enableAllNode()">
Enable All Nodes
</button>
</div>
@section Scripts{
<script>
function disableSelectedNode() {
let treeView = wijmo.Control.getControl("#treeView");
if (treeView && treeView.selectedNode) {
treeView.selectedNode.isDisabled = true;
}
}
function enableAllNode() {
let treeView = wijmo.Control.getControl("#treeView");
if (treeView) {
for (var nd = treeView.getFirstNode(); nd; nd = nd.next()) {
nd.isDisabled = false;
}
}
}
</script>
}
@section Settings{
@await Html.PartialAsync("_OptionsMenu", optionsModel)
}
@section Summary{
<p>@Html.Raw(TreeViewRes.Index_Text0)</p>
}
@section Description{
<p>@Html.Raw(TreeViewRes.Index_Text1)</p>
<p>@Html.Raw(TreeViewRes.Index_Text2)</p>
<p>@Html.Raw(TreeViewRes.Index_Text3)</p>
}
マニュアル