[6]Telerik TreeViewチェックボックス
12764 ワード
リファレンス接続:http://demos.telerik.com/aspnet-mvc/razor/treeview/clientsideapi
質問:
Telerik TreeViewが親オプションを選択またはキャンセルした場合、サブオプションは変更されません.
効果:
コード:
質問:
Telerik TreeViewが親オプションを選択またはキャンセルした場合、サブオプションは変更されません.
OnChecked , , 。。
:
効果:
コード:
@using TEST.XWebFramework.Extensions
@using Telerik.Web.Mvc;
@using Telerik.Web.Mvc.UI;
@using TEST.Business.Public;
@using TEST.Admin.Models.Support;
@{
Layout = "~/Views/Shared/_ListLayout.cshtml";
}
@model IEnumerable<TreeData>
@section HeadContent{
<style type="text/css">
.t-panelbar .t-group
{
border-bottom-width: 0px;
}
</style>
}
<div>
@(Html.Telerik().TreeView()
.Name("TreeView")
.ShowCheckBox(true)
.ClientEvents(events =>
events.OnSelect("onSelect")
.OnChecked("onChecked") //
)
.BindTo(Model, mappings =>
{
mappings.For<TreeData>(binding => binding
.ItemDataBound((item, node) =>
{
item.Text = node.text;
item.Value = node.id;
item.Checked = node.Checked;
})
.Children(p => p.children));
})
.ExpandAll(true)
)
</div>
@section FootContent{
<script type="text/javascript">
var Tree = {};
function getSelected() { // li
return $('#TreeView .t-state-selected').closest('li');
} // item
function getSelectedName() {
var li = $('#TreeView .t-state-selected').closest('li'); if (li.length != 0) {
return
li.find("span").Text;
} else { return ""; }
} // item id
function getSelectedValue() {
var li = $('#TreeView .t-state-selected').closest('li'); if (li.length != 0) {
return li.find("input[name='itemValue']").attr("value");
} else { return -1; }
}
//
function onSelect(e) {
}
//
function onChecked(e) {
var treeView = $("#TreeView").data("tTreeView");
var value = treeView.getItemValue(e.item);
//
if (value == "0") { //
if (e.checked == true) {
CheckAll();
} else {
UncheckAll();
}
} else {
if (e.checked == true) {
$(e.item).closest('li').find('.t-group').find(".t-item").each(function (i) { //
CheckItem(this);
});
} else {
$(e.item).closest('li').find('.t-group').find(".t-item").each(function (i) { //
UncheckItem(this);
});
}
}
}
//
function CheckAll() {
var treeView = $("#TreeView").data("tTreeView");
treeView.nodeCheck(".t-item", true);
}
//
function UncheckAll() {
var treeView = $("#TreeView").data("tTreeView");
treeView.nodeCheck(".t-item", false);
}
//
function CheckItem(item) {
var treeView = $("#TreeView").data("tTreeView");
treeView.nodeCheck(item, true);
}
//
function UncheckItem(item) {
var treeView = $("#TreeView").data("tTreeView");
treeView.nodeCheck(item, false);
}
</script>
}