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