Easyui笔记4:实现表格内combobox数据的动态切换(getEditor的使用)

版权声明:本文为博主原创文章,转载时请注明出处,谢谢!喝酒不骑马 邮箱myz9412@163.com https://blog.csdn.net/Colton_Null/article/details/56684836

最近项目中正在使用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',{});
});

没有更多推荐了,返回首页