Kendo UI 使用经验点滴(三）——Grid批量编辑中的下拉框设置

自定义下拉框编辑器

在前面的例子中，网格中显示人员所在的部门，我们在编辑时，需要使用下拉框选择所在的部门：

网格中的下拉框

这里需要解决几个问题：
1、我们在数据库中保存的是部门的id，不是部门的名称，而在显示时，需要显示部门的名称。
2、在编辑时，我们需要加载下拉框，并获取部门的数据，进行编辑。

为了解决第一个问题，我们在返回的数据中，不仅返回部门的id，还返回部门的名称，

                        model: {
                                    id: "OBJECTID",
                                    fields: {
                                        ...
                                        DEPARTMENTID: { editable: true, },
                                        DEPARTMENTID_DicText: { editable: false, nullable: true  },
                                        ...
                                    }
                                }

在模型定义中，定义DEPARTMENTID为可编辑的，DEPARTMENTID_DicText不可编辑。
在columns的定义中，定义DEPARTMENTID的显示模板为DEPARTMENTID_DicText：

 { field: "DEPARTMENTID", title: "部门", editor: categoryDropDownEditor, template: "#=DEPARTMENTID_DicText#" },

这样DEPARTMENTID在网格显示时，实际显示的是DEPARTMENTID_DicText

为了实现下拉框选择，我们创建自定义的编辑器，categoryDropDownEditor，这个编辑器是一个函数：

                //自定义编辑控件，下拉框
                function categoryDropDownEditor(container, options) {
                    $('<input  name="' + options.field + '"/>')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataTextField: "Text",
                            dataValueField: "Value",
                            height: 600,
                            dataSource: {
                                transport: {
                                    read: {
                                        url: myRoot + "GetDictionary"
                                    }
                                }
                            },
                            change: function (e) {
                                options.model[options.field + "_DicText"] = e.sender.text();
                            }
                        });
                }

这个函数中创建了一个input控件，并转换为kendoDropDownList下拉框，下拉框通过ajax获取部门的数据，选择后，修改模型中保存的数据。