Easyui datagrid 编辑结束时combobox显示value而不显示text

电脑版发表于：2014/3/28 15:39

在调用datgrid编辑结束时 

$('#dg').datagrid('endEdit', editIndex);

datagrid的combobox会显示出value，

这是因为easyui在我们编辑结束时为了方便使用更改的值而记录下了combobox的value而不是text
```
var inserted = $("#dg").datagrid('getChanges', "inserted");
var deleted = $("#dg").datagrid('getChanges', "deleted");
var updated = $("#dg").datagrid('getChanges', "updated");
```
获取到更改在传会后台使用倒是方便，但是显示出来是value很不舒服，

###解决方法一(不推荐)：

这是我们可以使用formatter来格式化输出

因为无论是加载数据与编辑结束时datagrid都会执行formatter函数,所以我们可以用它来输出我们想要的内容,

而且combobox的数据采用data方式而不直接使用url
```
<th data-options="field:'UserLevelId',width:100,
                        formatter:fmLevelAJ,
                        editor:{
                            type:'combobox',
                            options:{
                                textField:'UserLevelName',
                                valueField:'UserLevelId',
                                data:GetLevelDTAJ(),
                                editable:false                               
                            }
                        }">会员等级</th>
```
```
var comboboxData = "";
 
        function GetLevelDTAJ()
        {
            $.ajax({
                url: "xx",
                type: 'get',
                async: false,//此处必须是同步
                dataTye: 'json',
                success: function (data) {
                    comboboxData = data;
                }
            })
            return comboboxData;
        }
 
        function fmLevelAJ(value, row) {
            console.log(comboboxData);
            for (var i = 0; i < comboboxData.length; i++) {
                if (comboboxData[i].UserLevelId == value) {
                    return comboboxData[i].UserLevelName;
                }
            }
            return row.UserLevelId;
        }
```
原来的写法:
```
<th data-options="field:'UserLevelId',width:100,
                        formatter:function fmLevelAJ(value, row) {
                             return row.UserLevelId;
                        },
                        editor:{
                            type:'combobox',
                            options:{
                                textField:'UserLevelName',
                                valueField:'UserLevelId',
                                url:'xx',
                                editable:false                               
                            }
                        }">会员等级</th>
```

### 解决方法二：
后台返回一个值，当然不好解决，但是可以在后台查询出键值对,显示用值，返回用键

1：必须要把键值都查询出来field写键,formatter写值
```
<th data-options="field:'ID',width:120, --键用于返回回台
                        formatter:function(value,row){ 
                            return row.Company; --值用于显示
                        },
                        editor:{
                            type:'combobox',
                            options:{
                               valueField:'ID',
                               textField:'Company',
                               url:'/Membership/GetCompanyList',
                               editable:false        
                            }
                        }">公司名称</th>
```
一般这样就可以了，但是有时间需要编辑多条的时候需要进行下第二条

2:在编辑结束前，得到对应的Combobox赋值一次
```
 var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'ID' });  //editIndex编辑时记录下的行号
                if (ed != null) {
                    var Company = $(ed.target).combobox('getText');
                    $('#dg').datagrid('getRows')[editIndex]['Company'] = Company;
                }
                $('#dg').datagrid('endEdit', editIndex);
```

完整一点的代码
```
function endEditing() {
            if (editIndex == undefined) { return true }
            if ($('#dg').datagrid('validateRow', editIndex)) {

                var ed = $('#dg').datagrid('getEditor', { index: editIndex, field: 'ID' });  //editIndex编辑时记录下的行号
                if (ed != null) {
                    var Company = $(ed.target).combobox('getText');
                    $('#dg').datagrid('getRows')[editIndex]['Company'] = Company;
                }

                $('#dg').datagrid('endEdit', editIndex);
                editIndex = undefined;


                return true;
            }
            else {return false;}
        }
```

剑轩

Easyui datagrid 编辑结束时combobox显示value而不显示text

{{item.title}}