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



在调用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;}
        }



评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值