在ExtJS 6.5.3中,可以通过使用过滤器在除空记录之外的网格上进行过滤。下面是一个完善且全面的答案:
在ExtJS 6.5.3中,可以使用Grid组件的store属性来实现网格数据的过滤。要在除空记录之外的网格上使用过滤器,可以按照以下步骤进行操作:
以下是一个示例代码,演示如何在除空记录之外的网格上使用过滤器:
Ext.create('Ext.grid.Panel', {
store: Ext.create('Ext.data.Store', {
fields: ['name', 'age', 'gender'],
filters: Ext.create('Ext.util.FilterCollection'),
data: [
{ name: 'John', age: 25, gender: 'Male' },
{ name: 'Jane', age: 30, gender: 'Female' },
{ name: 'Bob', age: 35, gender: 'Male' },
{ name: 'Alice', age: null, gender: 'Female' }
]
}),
columns: [
{ text: 'Name', dataIndex: 'name', filter: true },
{ text: 'Age', dataIndex: 'age', filter: true },
{ text: 'Gender', dataIndex: 'gender', filter: true }
],
dockedItems: [{
xtype: 'toolbar',
items: [{
xtype: 'textfield',
emptyText: 'Filter...',
listeners: {
change: function (textfield, newValue) {
var grid = textfield.up('grid'),
store = grid.getStore(),
filter = Ext.create('Ext.util.Filter', {
property: 'name',
value: newValue,
operator: 'like'
});
store.clearFilter();
store.addFilter(filter);
}
}
}]
}],
renderTo: Ext.getBody()
});
在上述示例中,我们创建了一个包含姓名、年龄和性别的网格。其中,年龄字段中有一个空记录。我们为每一列设置了filter属性为true,启用了过滤功能。在顶部工具栏中添加了一个文本框,用于输入姓名过滤条件。当用户输入过滤条件并按下回车键时,会触发文本框的change事件处理程序。在处理程序中,我们获取了网格的Store对象,并使用之前创建的过滤器对象进行过滤。最后,通过调用store的clearFilter方法清除之前的过滤器,并调用addFilter方法添加新的过滤器,实现了网格数据的过滤。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
请注意,以上答案仅供参考,具体实现方式可能因实际情况而有所不同。
领取专属 10元无门槛券
手把手带您无忧上云