使用Extjs6作为前端。想在Gird上进行数据筛选。网上没多少可参考资料。后来在官方提供的Demo中找到了想要的东西。详情如下:
效果图
![144920_7gMU_1766974.png](https://static.oschina.net/uploads/space/2018/0316/144920_7gMU_1766974.png)
在这个基础上进行了调整。于是成了如下的样子
![145009_epv7_1766974.png](https://static.oschina.net/uploads/space/2018/0316/145009_epv7_1766974.png)
具体的代码如下:
前提。表格的数据已经获取并绑定到Grid上。筛选实在已经存在的数据基础上进行。故不会增加也不会减少已经绑定好的数据。
{
text : '项目',
dataIndex : 'ItemName',
minWidth : 280,
height : 35,
menuDisabled : true,
draggable : false,
flex : 1,
items : {
xtype : 'textfield',
emptyText : '按名称查找', // 提示语
width : 200, // 宽度
reference : 'nameFilterField', // 命名
style : 'position:absolute;top:1px;right:10px;!important;', // 定位
enableKeyEvents : true, // 启用按键监听。随着输入500触发一次筛选
triggers : {
bar : {
cls : 'x-form-clear-trigger',// 可不用,使用默认有输入时,后边出现一个清空X按钮
handler : 'nameFilterFieldResult' // 清除筛选
}
},
listeners : {
keyup : 'onNameFilterKeyup', // 开始筛选
buffer : 500
// 触发延时
}
}
}
对应的keyup事件为
//表头的搜索事件
onNameFilterKeyup:function(){
var me = this, view = me.getView(), vm = me.getViewModel();
var ruleGrid = me.lookupReference("groupItemGrid"),
filterField = me.lookupReference("nameFilterField"),//查询的输入控件
filters = ruleGrid.store.getFilters();//当前表格的filter
if(filterField.value){//有输入值,添加filter
this.nameFilter = filters.add({
id:'nameField',
property:'ItemName',//通过name属性过滤
value:filterField.value,//值为搜索框输入的值
anyMatch:true,//模糊匹配
caseSensitive:false
});
}else if(this.nameFilter){//未输入,则移除filter
filters.remove(this.nameFilter);
this.nameFilter = null;
}
}
//表头搜索框的清空按钮
nameFilterFieldResult:function(){
var me = this, view = me.getView(), vm = me.getViewModel();
var filterField = filterField = me.lookupReference("nameFilterField");
filterField.reset(); //重置
me.onNameFilterKeyup();
}
如果觉得上面的麻烦。下面会贴上Demo中使用的源码
{
text: 'Name (Filter)',
sortable: true,
dataIndex: 'name',
groupable: false,
width: 140,
layout: 'hbox',
locked: true,
renderer: 'concatNames',
editor: {
xtype: 'textfield'
},
items : {
xtype: 'textfield',
reference: 'nameFilterField', // So that the Controller can access it easily
flex : 1,
margin: 2,
enableKeyEvents: true,
listeners: {
keyup: 'onNameFilterKeyup',
buffer: 500
}
}
}
//对应事件如下
onNameFilterKeyup: function() {
var grid = this.getView(),
// Access the field using its "reference" property name.
filterField = this.lookupReference('nameFilterField'),
filters = grid.store.getFilters();
if (filterField.value) {
this.nameFilter = filters.add({
id : 'nameFilter',
property : 'name',
value : filterField.value,
anyMatch : true,
caseSensitive : false
});
} else if (this.nameFilter) {
filters.remove(this.nameFilter);
this.nameFilter = null;
}
},