1

我找到了一些答案来解释如何从这里的文本框中删除 Kendo UI kendoDatePicker 小部件http://www.kendoui.c​​om/forums/ui/general-discussions/method-for-removing-controls.aspx和这里http ： //www.kendoui.c​​om//forums/ui/date-time-pickers/datepicker-becomes-static.aspx

不幸的是，当我尝试删除 NumericTextBox 的属性时，上述示例似乎没有帮助。我最终得到了下面的来源。

var numericTextBox = $(selector).data("kendoNumericTextBox");
    var element = numericTextBox.wrapper[0] ? numericTextBox.wrapper
            : numericTextBox.element;

    // unwrap element
    var input = numericTextBox.element.show();
    input.removeClass("k-input").css("width", "12.4em");
    input.removeClass("numerictextbox");
    input.insertBefore(numericTextBox.wrapper);

    numericTextBox.wrapper.remove();

    input.removeAttr("data-role");
    input.removeAttr("role");

我最终得到了一个看起来像一个简单文本框的文本框，但除了数字之外，我仍然不允许添加任何其他内容。此外，我还尝试添加行 input.removeData("kendoNumericTextBox"); 这与我在上面发布的链接上的建议很接近，但我无法确定这条线的作用。

4

1 回答 1

2

而不是玩从文本到数字转换的小部件装饰，反之亦然，两者兼而有之要容易得多，并且总是隐藏其中一个。您只需要添加一个类/删除一个类并让正确的类可见。

假设我有以下 CSS 定义：

.ob-hide {
    display: none;
}

以下 HTML：

<div id="combobox"></div>
<div id="number"></div>
<div id="text"></div>

那么我的 JavaScript 将是：

$("#combobox").kendoDropDownList({
    dataSource: {
        data: [ "string", "number" ]
    },
    value     : "string",
    change    : function (e) {
        console.log("change");
        if (this.value() === "string") {
            console.log("string");
            $("#number").closest(".k-numerictextbox").addClass("ob-hide");
            $("#text").closest(".k-autocomplete").removeClass("ob-hide");
        } else {
            console.log("number");
            $("#number").closest(".k-numerictextbox").removeClass("ob-hide");
            $("#text").closest(".k-autocomplete").addClass("ob-hide");
        }
    }
});
$("#number").addClass("ob-hide").kendoNumericTextBox({});
$("#text").kendoAutoComplete({});
于 2013-02-11T09:55:53.717 回答