Easyui笔记4：实现表格内combobox数据的动态切换（getEditor的使用）

最近项目中正在使用easyui。本系列文章会记录我在easyui使用中淌过的坑和一些功能的实现方法，用于经验分享以及日后查阅。欢迎转载，转载请注明出处，谢谢~(作者：Colton_Null)

---

如何实现表格内combobox数据的动态切换？

假设有这样一个需求：
在表格一行中，有两个下拉框编辑器。其中一个编辑器的选项内容要根据另一个编辑器的选项动态加载。
例如，A下拉框选择1时，B下拉框的选项为test1，test2，test3。当A下拉框选择2时，B下拉框的选项为test4，test5，test6。我们无法获得每行编辑器的id，那么如何实现这个功能？
这就需要用到Easyui中datagrid组件的getEditor方法。

getEditor:

获取指定编辑器，options包含2个属性：
index：行索引。
field：字段名称。
代码示例：

// 获取日期输入框编辑器并更改它的值var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});$(ed.target).datebox('setValue', '5/4/2012');

在onClickRow或者onSelect事件中，将点击行的索引传到全局变量里。这样getEditor方法中，传入的对象里有个index参数（行索引）值就可以被获取，就可以获得到该行的任意一个编辑器对象了。ed就是获得了列名叫”birthday”的编辑器的对象。通过$(ed.target)就可以像正常一样使用这个编辑器下所承载的组件的属性、方法了。

效果展示：

js代码：

var globalIndex;var dataArray = [{value : 'A'},{value : 'B'}];var comboboxData1 = [{value : '1'},{value : '2'},{value : '3'}];var comboboxData2 = [{value : '4'},{value : '5'},{value : '6'}];$(function () {    $('#dg').datagrid({        width: '500px',        height: '200px',        title: '动态加载数据',        fitColumns: true,        rownumbers: true,        columns: [[            {                field: 'test',                title: '测试列',                width: '20%',                editor: {                    type: 'combobox',                    options: {                        editable: true,                        limitToList: true,                        valueField: 'value',                        textField: "value",                        data: dataArray,                        panelHeight : 'auto',                        onChange : function (newValue, oldValue) {                            if(newValue == "A"){                                var ed =  $("#dg").datagrid("getEditor",{index:globalIndex,field:"test2"});                                $(ed.target).combobox('loadData',comboboxData1);                            }else if(newValue == "B"){                                var ed =  $("#dg").datagrid("getEditor",{index:globalIndex,field:"test2"});                                $(ed.target).combobox('loadData',comboboxData2);                            }                        }                    }                }            },            {                field: 'test2',                title: '测试列2',                width: '20%',                editor: {                    type: 'combobox',                    options: {                        editable: true,                        limitToList: true,                        valueField: 'value',                        textField: "value",                        panelHeight : 'auto',                        data: comboboxData1,                    }                }            }        ]],        onClickRow: function (index, row) {            globalIndex = index;            $('#dg').datagrid('beginEdit', index);        }    });    $('#dg').datagrid('appendRow',{});});