Kendo UI 使用经验点滴(四）——Grid批量编辑中的日期编辑器设置

前面我们讨论了在Kendo UI Grid中下拉框的设置，这里讨论如何设置日期编辑器。

自定义日期编辑器

在上面的例子中，有入职日期字段，需要使用日期选择器进行编辑，由于kendo的日期型在服务器端不容易转换，所有我们采用字符串进行传输，因此在模型中，我们没有将这个字段定义为日期型，而是保持为字符型：

                                model: {
                                    id: "OBJECTID",
                                    fields: {
                                        ...
                                        JOINDATE: { editable: true, format: "yyyy-MM-dd", type: "string" },
                                        ...
                                    }
                                }

在columns中：

                        columns: [
                            ...
                            { field: "JOINDATE", title: "入职日期", editor: dateEditor },
                            ...
                        ],

在这里，我们定义了这个列的自定义编辑器，是一个函数，自定义的日期编辑器函数如下：

                //自定义编辑控件，日期
                function dateEditor(container, options) {
                    $('<input  name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDatePicker(
                            {
                            format: "yyyy-MM-dd",
                            culture: "zh-CN",
                                change: function (e) {
                                    options.model[options.field] = kendo.toString(e.sender.value(), "yyyy-MM-dd");
                                }
                            })
                }

在这个函数里，创建一个input标签，并转换为kendo DatePicker，在change事件中改变模型中的值。这样就完成了网格单元格编辑的日期编辑器。