Question

我正在尝试使用Kendo UI网格来表示一个字符串，该字符串通常存储为如下所示： “ww12'14”作为我数据源中的字符串。此格式适用于2014年第12周的工作。

在编辑模式下，我想给用户两个下拉列表。一个可用周选项，一个可用年份。我怎么能做到这一点？

我能做到的另一种方法是在编辑模式下使用水印。例如，当您在此列中进行编辑时，我希望文本框变为可用，并在其上设置水印。这将强制您的输入为两个整数，然后是两个更多的整数并自动填写w，w，'而用户输入2，两位数的整数值。这将强制用户输入始终有效。

我是如何使用Kendo UI Grid完成两项任务的？

欢迎并提前感谢您的帮助。

Answer 1

您可以使用jQuery插件来实现备选方案＃2：https://github.com/digitalBush/jquery.maskedinput

替代＃1：我会为此创建一个弹出窗口，因为两个下拉列表占用了大量空间，即在编辑时不是将控件放入网格单元格，您可以打开模态kendoWindow，将两个下拉窗口小部件放入其中，然后单击“确定/取消”按钮。将函数绑定到OK按钮，更新网格dataItem。

骨架代码：

editor: function (container, options) {
    var row = $(container).closest("tr");
    var dataItem = grid.dataItem(row);

    // create window etc.
    var windowHtml = ...
    $(windowHtml).kendoWindow({
        .... options
    });

    // handler to set the value
    $(container).on("click", okButtonSelector, function () {
        var weekValue = ddl1.value();
        var yearValue = ddl2.value();
        var packed = weekValue + "'" + yearValue;
        dataItem.set(columnName, packed);

        // destroy the window ...
        ...
    });
}

Kendo Grid UI水印列或一列的两个下拉列表

1 个答案: