[6]Telerik TreeView 复选框

简介: 参考连接:http://demos.telerik.com/aspnet-mvc/razor/treeview/clientsideapi 问题:  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>
}

 

 

 

 

 

相关文章
|
6月前
|
C# 数据库
40.c#:TreeView 控件
40.c#:TreeView 控件
64 1
|
C#
WPF中实现多选ComboBox控件
原文:WPF中实现多选ComboBox控件 在WPF中实现带CheckBox的ComboBox控件,让ComboBox控件可以支持多选。 将ComboBox的ItemsSource属性Binding到一个Book的集合, public class Book { ...
3572 0
|
数据处理 C#
C#-TreeView
TreeView是一个树形结构的控件,能够表现出对象的层级关系,比如文件夹目录展示经常使用。
106 0
WPF 点击 Datagrid 中的TextBox 控件获取其所在行的数据
WPF 点击 Datagrid 中的TextBox 控件获取其所在行的数据