解決EasyUI combogrid 下拉過濾的bug

在使用combogrid時候有時候會用到手動輸入里面的項.列如代碼

<select class="easyui-combogrid" tag="ps" name="[e-mail]_ID" id="[e-mail]_ID" style="width: 160px;height:23px" data-options="    
   panelWidth: 210,
   idField: 'MATERIAL_COLOR_ID',
   textField: 'MATERIAL_COLOR_NAME',
   columns: [[
   { field: 'MATERIAL_COLOR_CODE', title: '色號', width: 100 },
   { field: 'MATERIAL_COLOR_NAME', title: '名稱', width: 100 }
   ]],
   onSelect:colorChange
   ">
</select> 

因為我用的是本地數據過濾,而combogrid又顯示的兩例,所以需要添加下拉過濾方法,同時對兩列進行過濾.

所以需要加上 filter

<select class="easyui-combogrid" tag="ps" name="[e-mail]_ID" id="[e-mail]_ID" style="width: 160px;height:23px" data-options="    
   panelWidth: 210,
   idField: 'MATERIAL_COLOR_ID',
   textField: 'MATERIAL_COLOR_NAME',
   columns: [[
   { field: 'MATERIAL_COLOR_CODE', title: '色號', width: 100 },
   { field: 'MATERIAL_COLOR_NAME', title: '名稱', width: 100 }
   ]],
   filter: function(q, row){
   return row['MATERIAL_COLOR_NAME'].indexOf(q) >-1 || row['MATERIAL_COLOR_CODE'].indexOf(q) >-1;
   },
   onSelect:colorChange
   ">
</select> 

效果如下

 

這時候就會相應的出現一個bug,如果你在下拉框里輸入了下拉菜單里面沒有的項后,直接關閉,那么當你再點編輯的時候,當前下拉菜單的value會賦值上去,而text卻跟不上去.

首先點編輯的時候,4個下拉值都在

下拉框中隨便輸入了一個沒有的值,然后關閉掉界面

再次點編輯,第一個下拉框的值就帶不出來了.

 

這時候,你調用 clear,setText都無效的.

通過查看源代碼

function _7f7(_7f8,q){
var opts=$.data(_7f8,"combogrid").options;
var grid=$.data(_7f8,"combogrid").grid;
$.data(_7f8,"combogrid").remainText=true;
if(opts.multiple&&!q){
_7f2(_7f8,[],true);
}else{
_7f2(_7f8,[q],true);
}
if(opts.mode=="remote"){
grid.datagrid("clearSelections");
grid.datagrid("load",$.extend({},opts.queryParams,{q:q}));
}else{
if(!q){
return;
}
var rows=grid.datagrid("getRows");
for(var i=0;i<rows.length;i++){
if(opts.filter.call(_7f8,q,rows[i])){
grid.datagrid("clearSelections");
grid.datagrid("selectRow",i);
return;
}
}
}
};

發現他是通過 $.data(_7f8,"combogrid").remainText=true;來進行文本框的控制,而又沒有開放remainText置false的方法,那么也簡單,

直接在編輯load data前,將下拉的remainText置為undefined

$("select[id^='col_']").each(function () {
  var c = $(this);
  $.data(this, "combogrid").remainText = undefined;
  });
 $("#fm").form("load", row);

 

注:EasyUI版本1.3.2

另一這版本還發現個問題,在FIREFOX里面,下拉輸入個KEY,他第一次過濾為空,再輸入個KEY的時候,過濾會是前一次輸入的KEY,在別的瀏覽器里都沒有這個問題.