TreeView
チェックボックス
このビューは、TreeView コントロールにチェックボックスを表示する方法を示します。
機能
サンプル
設定
説明
「show-checkboxes」属性を true に設定すると、TreeView の各ノードにチェックボックスが追加されます。
チェックボックスが表示されると、TreeView コントロールがその階層を管理し、チェックボックスがオンまたはオフにされると、 新しい値がすべての子ノードに自動的に適用され、親ノードの状態に反映されます。
項目をオンまたはオフにすると、「checked-items-changed」イベントが生成され、 クライアント TreeView オブジェクトの checkedItems プロパティに含まれる現在オンの項目のリストが更新されます。
チェックボックスは、TreeView が遅延ノードなしで動作する場合にのみ表示されます。 つまり、「LazyLoadActionUrl」属性と「lazy-load-function」属性が設定されていない場合です。
CheckOnClickプロパティ(またはcheck-on-click属性)を 'true'に設定すると、チェックボックスだけでなくアイテム全体をクリックしたときにチェックが切り替わります。
CheckedMemberPathプロパティ(またはchecked-member-path属性)は、チェックボックスの値によって割り当てられるTreeViewのデータ項目のどのプロパティ(たとえば、 'NewItem')かを決定します。
ソース
CheckboxesController.cs
using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; using System.Collections.Generic; using Microsoft.AspNetCore.Http; namespace MvcExplorer.Controllers { public partial class TreeViewController : Controller { // GET: Checkboxes public ActionResult Checkboxes(IFormCollection collection) { _treeViewCheckboxesDataModel.LoadPostData(collection); ViewBag.DemoOptions = _treeViewCheckboxesDataModel; return View(Property.GetData(Url)); } private readonly ControlOptions _treeViewCheckboxesDataModel = new ControlOptions { Options = new OptionDictionary { {"CheckOnClick",new OptionItem{Values = new List<string> { "True", "False"},CurrentValue = "False"}}, {"CheckedMemberPath", new OptionItem{Values = new List<string> { "null", "NewItem"},CurrentValue = "null"}} } }; } }
Checkboxes.cshtml
@model Property[] @{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; } @section Scripts{ <script type="text/javascript"> function checkedItemsChanged(treeView) { //Showing NewItem status var selectedNode = treeView.selectedNode; if (selectedNode) { formatItemRecurrsive(treeView, selectedNode); } //Showing checked items status list var items = treeView.checkedItems, msg = ''; if (items.length) { msg = '<p><b>@Html.Raw(TreeViewRes.Checkboxes_Text0)</b></p><ol>\r\n'; for (var i = 0; i < items.length; i++) { if (items[i].NewItem) { msg += '<li style="color:red">' + items[i].Header + ' <i>(NewItem = true)</i></li>\r\n'; } else { msg += '<li>' + items[i].Header + ' <i>(NewItem = false)</i></li>\r\n'; } } msg += '</ol>'; } document.getElementById('tvChkStatus').innerHTML = msg; } //Custom Format Item for showing NewItem status function formatItem(treeView, node) { var imgNewItem = node.element.lastChild; if (node.dataItem.NewItem) { if (imgNewItem.tagName != "IMG") { imgNewItem = document.createElement("img"); imgNewItem.setAttribute("style", "height:20px; margin-left:3px; content:url(@Url.Content("~/Content/images/new.png"));"); node.element.appendChild(imgNewItem); } } else if (imgNewItem.tagName == "IMG") { node.element.removeChild(imgNewItem); } } //Custom Format Item and all sub-items function formatItemRecurrsive(treeView, node) { formatItem(treeView, node); var nodes = node.nodes; if (nodes && nodes.length > 0) { for (var i = 0; i < nodes.length; i++) { formatItemRecurrsive(treeView, nodes[i]); } } } </script> } <c1-tree-view display-member-path="Header" child-items-path="Items" show-checkboxes="true" source="Model" check-on-click="@Convert.ToBoolean(optionsModel.Options["CheckOnClick"].CurrentValue)" checked-member-path="@optionsModel.Options["CheckedMemberPath"].CurrentValue" format-item="formatItem" loaded-items="checkedItemsChanged" checked-items-changed="checkedItemsChanged"> </c1-tree-view> <br /> <div id="tvChkStatus"></div> @section Settings{ @await Html.PartialAsync("_OptionsMenu", optionsModel) } @section Summary{ <p>@Html.Raw(TreeViewRes.Checkboxes_Text1)</p> } @section Description{ <p>@Html.Raw(TreeViewRes.Checkboxes_Text2)</p> <p>@Html.Raw(TreeViewRes.Checkboxes_Text3)</p> <p>@Html.Raw(TreeViewRes.Checkboxes_Text4)</p> <p>@Html.Raw(TreeViewRes.Checkboxes_Text5)</p> <p>@Html.Raw(TreeViewRes.Checkboxes_Text6)</p> <p>@Html.Raw(TreeViewRes.Checkboxes_Text7)</p> }
マニュアル