Easyui datagrid editor为combobox时指定数据源

拼搏现实的明天。 2022-08-04 10:47 132阅读 0赞

当在datagrid行内部应用添加编辑操作时，引入combobox是非常方便的操作，我在引入combobox时对数据源这快做个总结，在做demo的过程中遇到个问题，就是当你选择了下拉框的值后点击保存，此时显示的是value值，而不是text值，这时使用格式化函数解决此问题。

var Address = [{ "value": "1", "text": "CHINA" }, { "value": "2", "text": "USA" }, { "value": "3", "text": "Koren" }];
    
     
    
     
    
    function unitformatter(value, rowData, rowIndex) {
    
        if (value == 0) {
    
            return;
    
        }
    
     
    
        for (var i = 0; i < Address.length; i++) {
    
            if (Address[i].value == value) {
    
                return Address[i].text;
    
            }
    
        }
    
    }
    
    function GetTable() {
    
        var editRow = undefined;
    
     
    
        $("#Student_Table").datagrid({
    
            height: 300,
    
            width: 450,
    
            title: '学生表',
    
            collapsible: true,
    
            singleSelect: true,
    
            url: '/Home/StuList',
    
            idField: 'ID',
    
            columns: [[
    
             { field: 'ID', title: 'ID', width: 100 },
    
                { field: 'Name', title: '姓名', width: 100, editor: { type: 'text', options: { required: true } } },
    
                { field: 'Age', title: '年龄', width: 100, align: 'center', editor: { type: 'text', options: { required: true } } },
    
                { field: 'Address', title: '地址', width: 100, formatter: unitformatter, align: 'center', editor: { type: 'combobox', options: { data: Address, valueField: "value", textField: "text" } } }
    
            ]],
    
            toolbar: [{
    
                text: '添加', iconCls: 'icon-add', handler: function () {
    
                    if (editRow != undefined) {
    
                        $("#Student_Table").datagrid('endEdit', editRow);
    
                    }
    
                    if (editRow == undefined) {
    
                        $("#Student_Table").datagrid('insertRow', {
    
                            index: 0,
    
                            row: {}
    
                        });
    
     
    
                        $("#Student_Table").datagrid('beginEdit', 0);
    
                        editRow = 0;
    
                    }
    
                }
    
            }, '-', {
    
                text: '保存', iconCls: 'icon-save', handler: function () {
    
                    $("#Student_Table").datagrid('endEdit', editRow);
    
     
    
                    //如果调用acceptChanges(),使用getChanges()则获取不到编辑和新增的数据。
    
     
    
                    //使用JSON序列化datarow对象，发送到后台。
    
                    var rows = $("#Student_Table").datagrid('getChanges');
    
     
    
                    var rowstr = JSON.stringify(rows);
    
                    $.post('/Home/Create', rowstr, function (data) {
    
     
    
                    });
    
                }
    
            }, '-', {
    
                text: '撤销', iconCls: 'icon-redo', handler: function () {
    
                    editRow = undefined;
    
                    $("#Student_Table").datagrid('rejectChanges');
    
                    $("#Student_Table").datagrid('unselectAll');
    
                }
    
            }, '-', {
    
                text: '删除', iconCls: 'icon-remove', handler: function () {
    
                    var row = $("#Student_Table").datagrid('getSelections');
    
     
    
                }
    
            }, '-', {
    
                text: '修改', iconCls: 'icon-edit', handler: function () {
    
                    var row = $("#Student_Table").datagrid('getSelected');
    
                    if (row != null) {
    
                        if (editRow != undefined) {
    
                            $("#Student_Table").datagrid('endEdit', editRow);
    
                        }
    
     
    
                        if (editRow == undefined) {
    
                            var index = $("#Student_Table").datagrid('getRowIndex', row);
    
                            $("#Student_Table").datagrid('beginEdit', index);
    
                            editRow = index;
    
                            $("#Student_Table").datagrid('unselectAll');
    
                        }
    
                    } else {
    
     
    
                    }
    
                }
    
            }, '-', {
    
                text: '上移', iconCls: 'icon-up', handler: function () {
    
                    MoveUp();
    
                }
    
            }, '-', {
    
                text: '下移', iconCls: 'icon-down', handler: function () {
    
                    MoveDown();
    
                }
    
            }],
    
            onAfterEdit: function (rowIndex, rowData, changes) {
    
                editRow = undefined;
    
            },
    
            onDblClickRow: function (rowIndex, rowData) {
    
                if (editRow != undefined) {
    
                    $("#Student_Table").datagrid('endEdit', editRow);
    
                }
    
     
    
                if (editRow == undefined) {
    
                    $("#Student_Table").datagrid('beginEdit', rowIndex);
    
                    editRow = rowIndex;
    
                }
    
            },
    
            onClickRow: function (rowIndex, rowData) {
    
                if (editRow != undefined) {
    
                    $("#Student_Table").datagrid('endEdit', editRow);
    
     
    
                }
    
     
    
            }
    
     
    
        });
    
    }

效果图

![Center][]

[Center]: /images/20220731/f728480f6059492ebb8bc2fedb500e8e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关 easyUI datagrid的combobox的联动效果

最近做项目，大量用到easyui datagrid的方法，也学到了不少东西，先记录下来，方便以后查找 combobox的联动效果和赋值旁边的表格 \{field:'joi

悠悠/ 2022年09月25日 12:21/ 0 赞/ 199 阅读

相关 Easyui datagrid editor为combobox时指定数据源

当在datagrid行内部应用添加编辑操作时，引入combobox是非常方便的操作，我在引入combobox时对数据源这快做个总结，在做demo的过程中遇到个问题

拼搏现实的明天。/ 2022年08月04日 10:47/ 0 赞/ 133 阅读

相关 jquery esqyUI datagrid editor:{type:'combobox'} 数据源

<th field="level" width="80" editor="{ type:'combo

旧城等待，/ 2022年08月04日 10:47/ 0 赞/ 76 阅读

相关在EasyUI的DataGrid中嵌入Combobox

在做项目时，需要在EasyUI的DataGrid中嵌入Combobox，花了好几天功夫，在大家的帮助下，终于看到了它的庐山真面：

淩亂°似流年/ 2022年08月01日 15:45/ 0 赞/ 159 阅读

相关 easyui combobox

<div id=id+"_type"></div><span style="white-space:pre"> </span> var data=[

雨点打透心脏的1/2处/ 2022年07月21日 08:56/ 0 赞/ 181 阅读

相关 easyui-combobox

在做功能的时候用到easyui的combobox，下拉框经常使用，因此把它的使用方法简单总结如下： html代码部分： <pre name="cod

梦里梦外;/ 2022年07月15日 13:19/ 0 赞/ 168 阅读

相关 EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法，小编分享一下总结出来的两种绑定表格方法，知识在于积累。第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格前

左手的ㄟ右手/ 2022年06月04日 06:40/ 0 赞/ 344 阅读

相关 EasyUI的DataGrid绑定Json数据源

EasyUI给表格绑定数据是最常用的方法，小编分享一下总结出来的两种绑定表格方法，知识在于积累。第一种：数据存放在数据集中，每一行对应多个值，利用循环把数据绑定到表格

落日映苍穹つ/ 2022年06月03日 08:15/ 0 赞/ 185 阅读

相关 Easyui datagrid editor为combobox时指定数据源

当在datagrid行内部应用添加编辑操作时，引入combobox是非常方便的操作，我在引入combobox时对数据源这快做个总结，在做demo的过程中遇到个问题，就是当你选

蔚落/ 2022年05月26日 00:52/ 0 赞/ 172 阅读

相关 EasyUI--datagrid中编辑器(editor)的类型为combobox的值得绑定

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 1.绑定固定的值 <span style="f

小咪咪/ 2022年01月16日 16:35/ 0 赞/ 812 阅读