Disabled Kendo组件

最新推荐文章于 2020-11-27 14:40:38 发布

原创最新推荐文章于 2020-11-27 14:40:38 发布 · 892 阅读

0 ·

CC 4.0 BY-SA版权

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

Kendo

71 篇文章

订阅专栏

本文介绍了一种方法来禁用使用KendoUI框架构建的Web应用程序中的各种交互式组件，包括表格、输入框和按钮等，确保在查看模式下用户无法编辑页面内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    setStatus: function (editType) {
        if (editType === "view") {
            ////找出所有含有data-bind属性的元素
            //$("#divFloor [data-bind]").attr("disabled", "disabled");

            //找出所有gird元素
            var $girdEles = $("#divFloor [data-role='grid'],#divFloor [data-role='smartgrid']");

            //设置grid的不可修改
            for (var i = 0; i < $girdEles.length; i++) {
                var $ele = $($girdEles[i]),
                    widget = kendo.widgetInstance($ele);    //将元素转换成kendo实例

                if (widget) {
                    widget.setOptions({
                        editable: false
                    });
                }
            }

            ////button的只读需要另外处理,一定要最后处理
            ////便簽a，onclick事件失效
            //$("#divFloor a").each(function () {
            //    this.onclick = null;
            //});

            //Chelen:2016-08-04 屏蔽Kendo Input組件
            var element, widget;
            $("input").each(function(){
                element = $(this);                          //注意：必須将"DOM对象"轉為"jQuery對象"
                widget = kendo.widgetInstance(element);     //注意：部分組件會定位失敗。（已知"autocomplete"）
                if (widget && widget.enable) {
                    widget.enable(false);
                }
                else {
                    element.attr("disabled", "disabled");   //處理定位失組件(如"autocomplete")
                }
            })

            //Chelen:2016-08-04 屏蔽Button組件
            $(".k-button").not("#btnCancel").each(function () {
                $(this).addClass("k-state-disabled").attr("disabled", "disabled").removeAttr("onclick");
            });

            //Chelen: 2015-0815 加上Ok按鈕不可用
            $("#btnOk").attr("disabled", "disabled").removeClass("k-primary");   // 不可用, 移除高亮
        }
    },

2018-04-16 补充：

//#date_to 为kendoNumericTextBox 控件
var widget = kendo.widgetInstance($("#date_to"));

// disable 
widget.enable(false);

// enable
widget.enable(true);