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