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