1. 程式人生 > >Easyui datagrid 編輯結束時combobox顯示value而不顯示text

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;}
        }