参考连接:http://demos.telerik.com/aspnet-mvc/razor/treeview/clientsideapi
问题:
Telerik TreeView 选择或取消 父选项时候,子选项不会跟着变化。
现在通过OnChecked来实现,点击的时候找到子选项,再选中或取消。。 现象:
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAACWCAIAAAD4yzVYAAALfklEQVR4nO2db08jxx3H94Xca/AD7JfQKk3T57WiNORwq0p9UKmq1OQRlfqgPHDdVFGaax7cA9SekHpnUpVYCdwFc+Tg4ICAWwzGmONs/hz/zFGwjX1F2jzYXe/M7PzWi+2zPcv3o30A693xsvPxzLD73bGmA0CgdfsAQO8COQAJ5AAkkAOQQA5AAjkACeQAJJADkEAOQAI5AAnkACSQA5BADkACOQAJ5AAkkAOQQA5A0pIcf/74Yy9Lu44VdJhW5SjJqFartVqtUqmUSiXIoS5tkGN0bJxd5hdX7o5MffjH+7nt3XK5DDnUpT1yLCynjWVxZa14+r+f/uruD979ZDy5UqlUIIe6tFOOpdTai8L+F18v//DdT37x4b2XLw8adSuJiBaKZYVfs7GQpmka94qJ9ZL8VdBmPMkxevD69lrNub4uR3pja7uwl87kzi9K7/9m+K33Pn307dpmLteUHM71uq6bYkQS9q+xhN7byP4KpWgsx8hu7daTy1tPLp0vGXLMzC/NL2/9fXSueHo68Tj99vuf/fx396rVajq91j45srEQY4Ya+F2Oe7u1W08u/7D9fxc5nr/I//r3/3zrvU+XVwu//GjknQ/ufJVMVyqV3Nbztsnh4gbT1VhbJCJaKJYw10cS9iZWodwG9jtRRcUiYldmb2ls6NwsEdHYssQdlMBNjhHLDHc5lpZTz/OHP/rZX9/u/+ydD+7c/u0/qrXXpVIpXyi0Uw75hzARqZ/ubCxk7645f2S2Zdbye8mLsndiVLA0s1Vw3UwlKSxIOUYPXtfNcJdjdu7Z0clZ9POHP+6/85Pbf/vXeMq4yLG/v//GWw5+vVUF7O7Sn7nyzb28F8U0MFZT0OhdsrGQgmNoUo7ba+ZQw1hcBqTPFhaz2c3twuGfPp/4y91vzi8qJ8Xi8fHJ4eFRIzn4BsGuHs9jjjbIYRVxPTmEY2msoG5JpVAL0rYrpOVyuVarVavVcrnMXi11v86RiHADAevMyYZyTMut6/X/VoS+wOkWVW3WWm4vj0WxR+3+LuJfQXaPPUnX7604L13Q1znY9pz75AurPLUckUhIHCF6L4o9ErJbsQalkQQzPFWo4bihd2WV/yezM0AOQAI5AMnNlAN4AnIAEsgBSCAHIFFDjovLWnI58yA5PzIxg6W5ZXRqYWpl4+JScqWbQgE5Li5r8alns5l87rSyU7rC0tySO6083Sg8SM6flasez3xH5WjuimpyOTObyXf95Ppjmc3kk8sZj/XVaTmkaXX3ezEPkvNoM9q15E4ro48XPNZXF+QQ0uqjY+NffDnx5fg3DycfS+UYmZjp+jn10zIyMeOxvrojRz2tvrCcXvlvJp3JbW5tP/52BnJADjut/p90NrP5fGs7X9jZnX0651GO4X5N6x/jVsYHrNueA8Olq53SWNhO4wQHU8IJGgtrQgljYXMzdkctHL8a7tcEAkPr7JGE485CrEMSDlK6GXtIsre4cXIspdZXVjdW1zc3t7bzhZ29/f2Dg4PFpSVPcqSigb6BcB9zflPRgOnE1U4qOhjnKmB6KKj1Racd1RPok9artObo9awBqWiAqdfpoSBRx5Qc0ve9YXL8+6tH6Uwum9t+kd85ODg4OTkpFovFYnGVSKsLchgnnTv18QFp9Vvn2nnex8JacDAeDdh7NStHyi5keigYHooGTFfWB/uoyoYcMgw5vn6Y3NrO7+7tHR0dvXr16tyCSqvzclgnPSVUrdAUe5AjdTXcX9+rWTlsCYwfxsJ2v2Y3ZgGxywsOxs2VjgPgzWM6uPpm4f6gpg0M8+WE41fTQ0G+V1of7BN273k5HiWnd3b3Dg8Pi8Xi+fm5ETF0SatzcthOCB9N80SwJ9G9W+FVkI45rNp1/WRbw46xcF90unQ13B8cTLHdDbNjfCAwtG6+hXFIqWiAGOsYa8w/h9+M8ckqJz5gOxEfMI+cGPT0tBzTT2YNM87OzkqlUsWCSquzcrC9yfRQUPzjU9EAc2ZldeyoafMMNt1yWCVYNSH2esynXzNHwVxRtltC+exASr5Zo5/5MZAacjxbWFxdTW9u5l7k8/svXx4dHx+fnLik1Rk5uI+XtOItY9y7cPbV9cE+LRxvQY5UNNAXHR4K2p/y/qjdqvF1TLz7m5GjfkIU6laue4XUlkMceFpnNh5lz7XVdLsM+vhXzQ93s3KYPRpbN6y10vGQxrQrzEBEHBix3YpzM09y7Dj+b+pdOZq4t1KXgxk/OtsJtt2m6pJsHqaHgowc0usNbk2RMKwRL8OwPYvVqoX7g86RJj0gvZYQ1s/itZ/elqM5cIW0vYuv5MCNtzYuvXvjrTkmv1t/ulHo+mn1x/J0o9Cjt+yb46xcvT85h7BPi4sR9rk/OfeqJHkmXooCcui6flauTn63jphgK8vo1EJyOePdDF0VOUBXgByABHIAEsgBSBS4Qgq6hQL3VkC3UCB9DrqFAulz0C0USJ9zCJNrcROGNjcfCztHoEsJN3G+FwXS5zbsHI/i3Octy9HMZj43RoH0uY1bXUCO9qNA+pzBZQJQ++s4uJlm7Tmsmc7InmrSmAVSPuGwphnzmTOvctOlC7Ob+xAF0uc8Zr1xE9ezVcvMMi6ZhZiZqpybJD8r/GCWwcxKLcynTs207CsUSJ9LsL97RVq1Vs2JzUb9U+464TA3y7B0OmK3OYr9hALpcylW/yGpJ6Ny7Sq+7lTlkMNCqSukiRg7p7XVQchGDKFIJFQX4rpTlVPdCuR4k7R8b8U5BiS/CIFrLDxNVc5/PYp0QOoyu7kfwV1ZV1T89rD2ATnccHZINwrI4UTshG4skAOQQA5AAjkACeQAJJADkEAOQKLWFVLQUZS6twI6C9LngATpc0CiWvpc13Xui8XZVUIQsI40+ymUwN2vZy+ec79LinMWpevMvX7xpj4TVJN9G3dvoVT63MCMazCnU5JK57I/jlOfiGihEHe/tWFEw219SPyCesMoMbaos78JsQIxTN8TKJU+13XdGfTSpRVHfZ09sybRMPFFFSiu51U1FIgwj8OwsSM7RdT79/TUSp/rdohPtMNL1kt8lY/3NC9HLMu2D8aRccl3O5mkkhvKpc+5aChbW1QqnexWHNFA55iDrb8G0nD9BS9e/UAd2/Q6iqXP2bMq+fhxqXSXTAbfZBBBZXIX6XrryCTPQ5gvMceOlsNJy+lz578O4il2pNKpcgTHWpbDqHt7HCO8hTDEUcMOpa6QihVUN8EllS7dn3/V7JFalIN77knY3ngHcdCK/1ZYWry34qwfpp2gUunSAmSWya5zMBt5kSYb456HEPxz7M7GEXtyCIK7soAEcgASyAFIIAcggRyABHIAEsgBSCAHIIEcgESlK6Sgwyh1bwV0FqTPAQnS54BEpfS5I6vL3zSNJDzMX+6WSQcCSqXPhaSmJsRpGla2zyf/aztKpc/5oF0kVo9PeMxkQo7roVb6vC5BPeFdf4RJmG86ETHmieR6EJkcTOKGDSdzM6NbU56bHRdXpjitup9QLH1ux3fNMKDw4BAfIrcffnM+BmfnkJmnjOx9JdE/NgVY348fB/kMxdLnZmVYVeJ4wEkaBKTDw44vWRCD4w1/5oc+PkOt9Lkd5LY/7pEYM+DouBz1YtCttEg7rpAKQW6jp3DGer3JIXYrzi/K8CSHrsxjStdDvXsrwrWMBPfE/XXlYAeU1xLC+jkhPN3vK3BXFpBADkACOQAJ5AAkkAOQQA5AAjkACeQAJJADkKh3hRR0DOXurYDOgfQ5IEH6HJD4K33OZb2E2/oInV8bn6XPpXPTIlfcJD5Ln3uOcQAP+DV9rkOO1vFr+lzoVtzmugYU/kufOzVAy9Ekfk2fs0COJlHuCqnH9DkL5GgS9e6teEufs0COJsFdWUACOQAJ5AAkkAOQQA5AAjkACeQAJJADkEAOQPI9f24I7X7DvyoAAAAASUVORK5CYII=" alt="" />
实现效果:
aaarticlea/png;base64,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" alt="" />
代码:
@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 != ) {
return
li.find("span").Text;
} else { return ""; }
} //返回item的id
function getSelectedValue() {
var li = $('#TreeView .t-state-selected').closest('li'); if (li.length != ) {
return li.find("input[name='itemValue']").attr("value");
} else { return -; }
}
//选择节点事件
function onSelect(e) {
}
//选择节点事件
function onChecked(e) {
var treeView = $("#TreeView").data("tTreeView");
var value = treeView.getItemValue(e.item); //赋值
if (value == "") { //根节点
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>
}