博客

今天工作中使用 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);
    	});
   }