参考连接:http://demos.telerik.com/aspnet-mvc/razor/treeview/clientsideapi
问题:
Telerik TreeView 选择或取消 父选项时候,子选项不会跟着变化。
现在通过OnChecked来实现,点击的时候找到子选项,再选中或取消。。
现象:
![[6]Telerik TreeView 复选框 [6]Telerik TreeView 复选框](/default/index/img?u=ZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFMUUFBQUNXQ0FJQUFBRDR5elZZQUFBTGZrbEVRVlI0bk8yZGIwOGp4eDNIOTRYY2EvQUQ3SmZRS2szVDU3V2lOT1J3cTBwOVVLbXExT1FSbGZxZ1BIRGRWRkdhYXg3Y0E5U2VrSHBuVXBWWUNkd0ZjK1RnNElDQVd3ekdtT05zL2h6L3pGR3dqWDFGMmp6WVhlL003UHpXaSsyelBjdjNvMzBBNjkzeHN2UHh6TEQ3M2JHbUEwQ2dkZnNBUU84Q09RQUo1QUFra0FPUVFBNUFBamtBQ2VRQUpKQURrRUFPUUFJNUFBbmtBQ1NRQTVCQURrQUNPUUFKNUFBa2tBT1FRQTVBMHBJY2YvNzRZeTlMdTQ0VmRKaFc1U2pKcUZhcnRWcXRVcW1VU2lYSW9TNXRrR04wYkp4ZDVoZFg3bzVNZmZqSCs3bnQzWEs1RERuVXBUMXlMQ3lualdWeFphMTQrcitmL3VydUQ5NzlaRHk1VXFsVUlJZTZ0Rk9PcGRUYWk4TCtGMTh2Ly9EZFQzN3g0YjJYTHc4YWRTdUppQmFLWllWZnM3R1FwbWthOTRxSjlaTDhWZEJtUE1reGV2RDY5bHJOdWI0dVIzcGphN3V3bDg3a3ppOUs3LzltK0szM1BuMzA3ZHBtTHRlVUhNNzF1cTZiWWtRUzlxK3hoTjdieVA0S3BXZ3N4OGh1N2RhVHkxdFBMcDB2R1hMTXpDL05MMi85ZlhTdWVIbzY4VGo5OXZ1Zi9meDM5NnJWYWpxOTFqNDVzckVRWTRZYStGMk9lN3UxVzA4dS83RDlmeGM1bnIvSS8vcjMvM3pydlUrWFZ3dS8vR2prblEvdWZKVk1WeXFWM05ienRzbmg0Z2JUMVZoYkpDSmFLSll3MTBjUzlpWldvZHdHOWp0UlJjVWlZbGRtYjJsczZOd3NFZEhZc3NRZGxNQk5qaEhMREhjNWxwWlR6L09IUC9yWlg5L3UvK3lkRCs3Yy91MC9xclhYcFZJcFh5aTBVdzc1aHpBUnFaL3ViQ3hrNzY0NWYyUzJaZGJ5ZThtTHNuZGlWTEEwczFWdzNVd2xLU3hJT1VZUFh0Zk5jSmRqZHU3WjBjbFo5UE9IUCs2Lzg1UGJmL3ZYZU1xNHlMRy92Ly9HV3c1K3ZWVUY3TzdTbjdueXpiMjhGOFUwTUZaVDBPaGRzckdRZ21Ob1VvN2JhK1pRdzFoY0JxVFBGaGF6MmMzdHd1R2ZQcC80eTkxdnppOHFKOFhpOGZISjRlRlJJem40QnNHdUhzOWpqamJJWVJWeFBUbUVZMm1zb0c1SnBWQUwwcllycE9WeXVWYXJWYXZWY3JuTVhpMTF2ODZSaUhBREFldk15WVp5VE11dDYvWC9Wb1Mrd09rV1ZXM1dXbTR2ajBXeFIrMytMdUpmUVhhUFBVblg3NjA0TDEzUTF6blk5cHo3NUF1clBMVWNrVWhJSENGNkw0bzlFckpic1FhbGtRUXpQRldvNGJpaGQyV1YveWV6TTBBT1FBSTVBTW5ObEFONEFuSUFFc2dCU0NBSElGRkRqb3ZMV25JNTh5QTVQekl4ZzZXNVpYUnFZV3BsNCtKU2NxV2JRZ0U1TGk1cjhhbG5zNWw4N3JTeVU3ckMwdHlTTzYwODNTZzhTTTZmbGFzZXozeEg1V2p1aW1weU9UT2J5WGY5NVBwam1jM2trOHNaai9YVmFUbWthWFgzZXpFUGt2Tm9NOXExNUU0cm80OFhQTlpYRitRUTB1cWpZK05mZkRueDVmZzNEeWNmUytVWW1aanAram4xMHpJeU1lT3h2cm9qUnoydHZyQ2NYdmx2SnAzSmJXNXRQLzUyQm5KQURqdXQvcDkwTnJQNWZHczdYOWpablgwNjUxR080WDVONngvalZzWUhyTnVlQThPbHE1M1NXTmhPNHdRSFU4SUpHZ3RyUWdsallYTXpka2N0SEw4YTd0Y0VBa1ByN0pHRTQ4NUNyRU1TRGxLNkdYdElzcmU0Y1hJc3BkWlhWamRXMXpjM3Q3YnpoWjI5L2YyRGc0UEZwU1ZQY3FTaWdiNkJjQjl6ZmxQUmdPbkUxVTRxT2hqbkttQjZLS2oxUmFjZDFSUG9rOWFydE9ibzlhd0JxV2lBcWRmcG9TQlJ4NVFjMHZlOVlYTDgrNnRINlV3dW05dCtrZDg1T0RnNE9Ua3BGb3ZGWW5HVlNLc0xjaGdublR2MThRRnA5VnZuMm5uZXg4SmFjREFlRGRoN05TdEh5aTVrZWlnWUhvb0dURmZXQi91b3lvWWNNZ3c1dm42WTNOck83Kzd0SFIwZHZYcjE2dHlDU3F2emNsZ25QU1ZVcmRBVWU1QWpkVFhjWDkrcldUbHNDWXdmeHNKMnYyWTNaZ0d4eXdzT3hzMlZqZ1BneldNNnVQcG00ZjZncGcwTTgrV0U0MWZUUTBHK1Yxb2Y3Qk4yNzNrNUhpV25kM2IzRGc4UGk4WGkrZm01RVRGMFNhdHpjdGhPQ0I5TjgwU3dKOUc5VytGVmtJNDVyTnAxL1dSYnc0NnhjRjkwdW5RMTNCOGNUTEhkRGJOamZDQXd0RzYraFhGSXFXaUFHT3NZYTh3L2g5K004Y2txSno1Z094RWZNSStjR1BUMHRCelRUMllOTTg3T3prcWxVc1dDU3F1emNyQzl5ZlJRVVB6alU5RUFjMlpsZGV5b2FmTU1OdDF5V0NWWU5TSDJlc3luWHpOSHdWeFJ0bHRDK2V4QVNyNVpvNS81TVpBYWNqeGJXRnhkVFc5dTVsN2s4L3N2WHg0ZEh4K2ZuTGlrMVJrNXVJK1h0T0l0WTl5N2NQYlY5Y0UrTFJ4dlFZNVVOTkFYSFI0SzJwL3kvcWpkcXZGMVRMejdtNUdqZmtJVTZsYXVlNFhVbGtNY2VGcG5OaDVsejdYVmRMc00rdmhYelE5M3MzS1lQUnBiTjZ5MTB2R1F4clFyekVCRUhCaXgzWXB6TTA5eTdEaitiK3BkT1pxNHQxS1hneGsvT3RzSnR0Mm02cEpzSHFhSGdvd2MwdXNOYmsyUk1Ld1JMOE93UFl2VnFvWDdnODZSSmowZ3ZaWVExcy9pdFovZWxxTTVjSVcwdll1djVNQ050ell1dlh2anJUa212MXQvdWxIbyttbjF4L0owbzlDanQreWI0NnhjdlQ4NWg3QlBpNHNSOXJrL09mZXFKSGttWG9vQ2N1aTZmbGF1VG42M2pwaGdLOHZvMUVKeU9lUGRERjBWT1VCWGdCeUFCSElBRXNnQlNCUzRRZ3E2aFFMM1ZrQzNVQ0I5RHJxRkF1bHowQzBVU0o5ekNKTnJjUk9HTmpjZkN6dEhvRXNKTjNHK0Z3WFM1emJzSEkvaTNPY3R5OUhNWmo0M1JvSDB1WTFiWFVDTzlxTkErcHpCWlFKUSsrczR1SmxtN1Rtc21jN0lubXJTbUFWU1B1R3dwaG56bVRPdmN0T2xDN09iK3hBRjB1YzhacjF4RTllelZjdk1NaTZaaFppWnFweWJKRDhyL0dDV3djeEtMY3luVHMyMDdDc1VTSjlMc0w5N1JWcTFWczJKelViOVUrNDY0VEEzeTdCME9tSzNPWXI5aEFMcGN5bFcveUdwSjZOeTdTcSs3bFRsa01OQ3FTdWtpUmc3cDdYVlFjaEdES0ZJSkZRWDRycFRsVlBkQ3VSNGs3UjhiOFU1QmlTL0NJRnJMRHhOVmM1L1BZcDBRT295dTdrZndWMVpWMVQ4OXJEMkFUbmNjSFpJTndySTRVVHNoRzRza0FPUVFBNUFBamtBQ2VRQUpKQURrRUFPUUtMV0ZWTFFVWlM2dHdJNkM5TG5nQVRwYzBDaVd2cGMxM1h1aThYWlZVSVFzSTQwK3ltVXdOMnZaeStlYzc5TGluTVdwZXZNdlg3eHBqNFRWSk45RzNkdm9WVDYzTUNNYXpDblU1Sks1N0kvamxPZmlHaWhFSGUvdFdGRXcyMTlTUHlDZXNNb01iYW9zNzhKc1FJeFROOFRLSlUrMTNYZEdmVFNwUlZIZlowOXN5YlJNUEZGRlNpdTUxVTFGSWd3ajhPd3NTTTdSZFQ3OS9UVVNwL3Jkb2hQdE1OTDFrdDhsWS8zTkM5SExNdTJEOGFSY2NsM081bWtraHZLcGMrNWFDaGJXMVFxbmV4V0hORkE1NWlEcmI4RzBuRDlCUzllL1VBZDIvUTZpcVhQMmJNcStmaHhxWFNYVEFiZlpCQkJaWElYNlhycnlDVFBRNWd2TWNlT2xzTkp5K2x6NTc4TzRpbDJwTktwY2dUSFdwYkRxSHQ3SENPOGhUREVVY01PcGE2UWloVlVOOEVsbFM3ZG4zL1Y3SkZhbElONzdrblkzbmdIY2RDSy8xWllXcnkzNHF3ZnBwMmdVdW5TQW1TV3lhNXpNQnQ1a1NZYjQ1NkhFUHh6N003R0VYdHlDSUs3c29BRWNnQVN5QUZJSUFjZ2dSeUFCSElBRXNnQlNDQUhJSUVjZ0VTbEs2U2d3eWgxYndWMEZxVFBBUW5TNTRCRXBmUzVJNnZMM3pTTkpEek1YKzZXU1FjQ1NxWFBoYVNtSnNScEdsYTJ6eWYvYXp0S3BjLzVvRjBrVm85UGVNeGtRbzdyb1ZiNnZDNUJQZUZkZjRSSm1HODZFVEhtaWVSNkVKa2NUT0tHRFNkek02TmJVNTZiSFJkWHBqaXR1cDlRTEgxdXgzZk5NS0R3NEJBZklyY2Zmbk0rQm1mbmtKbW5qT3g5SmRFL05nVlkzNDhmQi9rTXhkTG5abVZZVmVKNHdFa2FCS1REdzQ0dldSQ0Q0dzEvNW9jK1BrT3Q5TGtkNUxZLzdwRVlNK0RvdUJ6MVl0Q3R0RWc3cnBBS1FXNmpwM0RHZXIzSklYWXJ6aS9LOENTSHJzeGpTdGREdlhzcndyV01CUGZFL1hYbFlBZVUxeExDK2praFBOM3ZLM0JYRnBCQURrQUNPUUFKNUFBa2tBT1FRQTVBQWprQUNlUUFKSkFEa0toM2hSUjBET1h1cllET2dmUTVJRUg2SEpENEszM09aYjJFMi9vSW5WOGJuNlhQcFhQVElsZmNKRDVMbjN1T2NRQVArRFY5cmtPTzF2RnIrbHpvVnR6bXVnWVUva3VmT3pWQXk5RWtmazJmczBDT0psSHVDcW5IOURrTDVHZ1M5ZTZ0ZUV1ZnMwQ09Kc0ZkV1VBQ09RQUo1QUFra0FPUVFBNUFBamtBQ2VRQUpKQURrRUFPUVBJOWYyNEk3WDdEdnlvQUFBQUFTVVZPUks1Q1lJST0=)
实现效果:
代码:
@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> }