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

 

 

 

 

 

posted @ 2013-10-24 18:27  心存善念  阅读(1189)  评论(0编辑  收藏  举报