[6]Telerik TreeView 复选框
参考连接:http://demos.telerik.com/aspnet-mvc/razor/treeview/clientsideapi
问题:
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> }