Extjs6 表格数据筛选（无查询）

使用Extjs6作为前端。想在Gird上进行数据筛选。网上没多少可参考资料。后来在官方提供的Demo中找到了想要的东西。详情如下：

效果图

在这个基础上进行了调整。于是成了如下的样子

 

具体的代码如下：

前提。表格的数据已经获取并绑定到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;
        }
    },

 

转载于:https://my.oschina.net/niaoge/blog/1635882