Extjs GridPanel 过滤

最新推荐文章于 2018-11-19 15:47:27 发布

原创最新推荐文章于 2018-11-19 15:47:27 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs4 #gridpanel #过滤 #网格过滤

本文介绍如何在ExtJS 4.0及以上的版本中实现表格(GridPanel)的动态过滤功能。通过设置正则表达式进行字段匹配，实现对表格数据的实时筛选。并提供了基于用户输入变化时自动更新过滤条件的示例代码。

Extjs4.0及以上, 4.0一下版本没有测试过.

//GridPanel 对象
var grid = Ext.getCmp("grid");
//定义过滤正则
var pattern = new RegExp('内容');
grid.getStore().filterBy(function (record, id) {
      var Fieldrn = record.get('需要过滤的dataIndex');
      var filterRestult = pattern.test(Fieldrn);
      return filterRestult;
});

参考:

tbar: [
    {
      xtype: 'textfield',fieldLabel:'过滤',labelWidth:40, listeners: {
          change: function (field, newValue, oldValue) {
                   var grid = Ext.getCmp("grid");                                                           
                   var pattern = new RegExp(newValue);
                   grid.getStore().filterBy(function (record, id) {
                   var Fieldrn = record.get('filterstring');
                   var filterRestult = pattern.test(Fieldrn);
                   return filterRestult;
                  });
               }
            }
       }
     ]