实现的效果如下：
在搜索框中输入部分列名关键字，即可匹配到行的位置。
EasyUI的SearchBox组件只提供了静态搜索框，我们可以使用ComboBox来实现动态的自动关键匹配效果，并且不需要加载远程数据。当前页面的DataGrid的数据我们可以直接在本地获取之。
代码如下：
setp1、创建comboBox
rush:xhtml;">
step2、实现本地数据加载
rush:js;">
$("#searchField").comboBox({
loader: function(param,success,error){
//获取输入的值
var q = param.q || "";
//此处q的length代表输入多少个字符后开始查询
if(q.length <= 0) return false;
var rows = $('#fieldList').datagrid('getRows');
var items = $.map(rows,function (item,index) {
//匹配条件，忽略大小写
if(item.fieldName && (item.fieldName.toLowerCase().indexOf(q.toLowerCase()) != -1)){
return {
"fieldName": item.fieldName
};
}
});
success(items);
},onBeforeLoad:function () {
//设置placeholder
$("input[class='textbox-text validatebox-text textbox-prompt']").attr("placeholder","输入标注字段，定位所在行");
},mode: 'remote',textField:'fieldName',valueField:'fieldName',onSelect : function(record){
var $filedList = $('#fieldList');
var rows = $filedList.datagrid('getRows');
if(rows && rows.length > 0){
for(var r = 0 ; r < rows.length ; r++){
if(rows[r].fieldName == record.fieldName){
$filedList.datagrid('selectRow',r);
break;
}
}
}
}
});
load是一个适配器，它将本地数据转换成comboBox所需的数据格式：
rush:js;">
var rows = $('#fieldList').datagrid('getRows');
var items = $.map(rows,index) {
//匹配条件，忽略大小写
if(item.fieldName && (item.fieldName.toLowerCase().indexOf(q.toLowerCase()) != -1)){
return {
"fieldName": item.fieldName
};
}
});
首先我们通过datagrid的getRows方法获取当前数据表的所有行，然后通过map转换。
rush:js;">
success(items);
到此就完成了数据的转换
step3、实现行的选中
0){
for(var r = 0 ; r < rows.length ; r++){
if(rows[r].fieldName == record.fieldName){
$filedList.datagrid('selectRow',r);
break;
}
}
}
}
在onSelect事件中，匹配所在行调用selectRow即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
