[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>

}