今天工作中使用 easyui combogrid外掛遇到的問題，記錄下，

使用場景：

1、 支援鍵盤上下箭給文字域賦值，回車傳送請求（焦點在文字域）

2、點選列表選項傳送請求

3、輸入框輸入文字時只顯示匹配的記錄

嘗試實現方式：

1.使用OnSelect事件，通過判斷 event.keyCode 處理,chrome,ie有效 ,Firefox沒有 window.event 物件,所以無效

$('#cg').combogrid({
    onSelect:function(index,row){
          if (event){
			   if (event.keyCode == "13" || event.keyCode == "0"){  //回車或點選列表選擇
			        alert("test");
			   }
		  }
    }
});

 

1.使用keyHandler屬性，如果只實現 enter 函式，使用鍵盤上下鍵會報如下錯誤：

實現空的up/down函式或者null，空的函式會覆蓋combogrid 的預設行為，使鍵盤上下鍵失去上下滾動選中賦值效果，null 則會報錯（query沒實現，文字框輸入時會報錯）

最終方案：

(function($){
	var oldLoadDataMethod = $.fn.datagrid.methods.loadData;
	$.fn.datagrid.methods.loadData = function(jq, data){
		jq.each(function(){
			$.data(this, 'datagrid').filterSource = null;
		});
		return oldLoadDataMethod.call($.fn.datagrid.methods, jq, data);
	};	
});

var combo = combo || {};
combo.clear =function(obj){
	if($(obj).combogrid()){
		$(obj).combogrid("clear");
		var _grid=$(obj).combogrid('grid');
		if(_grid && _grid.datagrid("getRows").length){
			_grid.datagrid('loadData', {total:0,rows:[]});
		}
	}
};
combo.filter=function(obj,fields){
	var value=obj.textbox("getText");
	var state=obj.combogrid('grid');
	var data = state.datagrid('getData');
	if ($.isArray(data)){
		data = {
			total: data.length,
			rows: data
		};
	}
	if (!state.filterSource){
		state.filterSource = data;
	}
	data = $.extend({}, state.filterSource);
	var rows = [];
	for(var i=0; i<data.rows.length; i++){
		var row = data.rows[i];
		if (isMatch(row)){
			rows.push(row);
		}
	}
	data = {
		total: data.total - (data.rows.length - rows.length),
		rows: rows
	};
	state.datagrid("loadData",data);
	if(data.total>0 && value!=""){
		state.datagrid("selectRow",0);
	}
	function isMatch(row){
		for(var i=0;i<fields.length;i++){
			var source = row[fields[i]];
			if (source){
				if(source.toLowerCase().indexOf(value.toLowerCase())>=0){
					return true;
				}
			}
		}
		return false;
	}
}
 

    
    //定義實驗室combogrid
    $('#laboratoryComboGridChart').combogrid({
        panelWidth: 400,
        width: 190,
        idField: 'id',
        mode:'local',
        textField: 'name',
        columns: [qcra.labTmpl],
        fitColumns: true,
        onLoadSuccess:function(data){
            //非預設載入
            if($('#laboratoryComboGridChart').combogrid('grid').filterSource){
        	 return false;
            }
	    if ($('#audit_labId').val()!=""){
	     	 //選中預設儀器
	     	 $ ('#laboratoryComboGridChart').combogrid ('setValue', $('#audit_labId').val());
	     	 //載入預設實驗室下儀器combogrid
	     	 findInstrumentsByLabId($('#audit_labId').val());
	     	 $("#audit_labId").remove();
	    }else{
	     	 $ ('#laboratoryComboGridChart').combogrid ('setValue', '${labId}');
	     	 //載入預設實驗室下儀器combogrid
	     	 findInstrumentsByLabId('${labId}');
	    }
       		
        },
      	onClickRow: function(index,row){
      		//載入實驗室下儀器
      		findInstrumentsByLabId(row.id);
      	}
    });
    var timer=null;
    var labGrid=$('#laboratoryComboGridChart');
    labGrid.textbox('textbox').bind('keyup', function(e){
        //輸入時延時0.4秒
        if(timer){
	    clearTimeout(timer);
	}
   	timer=setTimeout(function(){
   	    combo.filter($('#laboratoryComboGridChart'),['name','code']);
   	},400);
    	if (e.keyCode == 13){
    		var row=labGrid.combogrid('grid').datagrid('getSelected');
    		findInstrumentsByLabId(row.id);
    	}
    });
    //查詢實驗室
   function findLaboratorys(){
    	$.getJSON('${ctx}/qcra/findLaboratorys.action',function(data){
    		$('#laboratoryComboGridChart').combogrid('grid').datagrid('loadData',data);
    	});
   }