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