TreeView
概要
このビューは、TreeView for ASP.NET MVC の基本機能を示します。
機能
サンプル
設定
説明
TreeView コントロールは、テキスト、チェックボックス、画像、または任意の HTML コンテンツから成る階層リストを表示します。 通常、TreeView は、階層として表示すると便利なドキュメントの見出し、 インデックス項目、ディスク内のファイルやディレクトリ などの情報を表示するために使用されます。
ツリーを作成するには、通常 3 つのプロパティを設定する必要があります。
- Source これは、階層化データを含む配列です。配列の各項目には、ノードおよび(オプションで)子ノードの配列に関する情報が含まれます。
- DisplayMemberPath ツリーノードに表示されるテキストを含む、項目内のプロパティの名前を定義します。デフォルトでは、このプロパティは文字列「header」に設定されています。
- ChildItemsPath 子ノードの配列を含む、項目内のプロパティの名前を定義します。デフォルトでは、このプロパティは文字列「items」に設定されています。
ノード画像、チェックボックスをSource配列に連結するためにImageMemberPathとCheckedMemberPathプロパティ、およびツリービューの動作をカスタマイズするためにIsAnimated、AutoCollapse、ExpandOnClick、CollapseOnClick、ExpandOnLoad、CollapseWhenDisabledプロパティもあります。
ソース
IndexController.cs
using MvcExplorer.Models;
using System.Web.Mvc;
using System.Collections.Generic;
namespace MvcExplorer.Controllers
{
public partial class TreeViewController : Controller
{
// GET: Index
public ActionResult Index(FormCollection collection)
{
IValueProvider data = collection;
_treeViewDataModel.LoadPostData(data);
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;
}
@(Html.C1().TreeView()
.Id("treeView")
.Bind(Model)
.DisplayMemberPath("Header")
.ChildItemsPath("Items")
.IsAnimated(Convert.ToBoolean(optionsModel.Options["IsAnimated"].CurrentValue))
.CollapseWhenDisabled(Convert.ToBoolean(optionsModel.Options["CollapseWhenDisabled"].CurrentValue))
.AutoCollapse(Convert.ToBoolean(optionsModel.Options["AutoCollapse"].CurrentValue))
.ExpandOnClick(Convert.ToBoolean(optionsModel.Options["ExpandOnClick"].CurrentValue))
.CollapseOnClick(Convert.ToBoolean(optionsModel.Options["CollapseOnClick"].CurrentValue))
.ExpandOnLoad(Convert.ToBoolean(optionsModel.Options["ExpandOnLoad"].CurrentValue)))
<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{
@Html.Partial("_OptionsMenu", optionsModel)
}
@section Summary{
<p>@Html.Raw(Resources.TreeView.Index_Text0)</p>
}
@section Description{
<p>@Html.Raw(Resources.TreeView.Index_Text1)</p>
<p>@Html.Raw(Resources.TreeView.Index_Text2)</p>
<p>@Html.Raw(Resources.TreeView.Index_Text3)</p>
}
マニュアル