[6]Telerik TreeViewチェックボックス

12764 ワード

リファレンス接続: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>

}