如何在使用列级标题过滤Slickgrid时执行部分匹配

Question

使用固定标题行实现列级过滤器时，如何返回部分匹配的单元格?

即:搜索词:"蕃茄"

返回:automator, tomato等

Answer 1

在示例中的MyFilter下替换这个循环…

for (var columnId in columnFilters) {
    if (columnId !== undefined && columnFilters[columnId] !== "") {
        var c = grid.getColumns()[grid.getColumnIndex(columnId)];
        if (item[c.field] != columnFilters[columnId]) {
            return false;
        }
    }
}

这个. .

for (var columnId in columnFilters) {
    if (columnId !== undefined && columnFilters[columnId] !== "") {
        var c = grid.getColumns()[grid.getColumnIndex(columnId)];
        if (item[c.field].indexOf(columnFilters[columnId]) == -1) {
            return false;
        }
    }
}

Answer 2

下面是我用来实现这一点的coffeescript代码:

filterGrid = (item) ->
    return true unless hasFilter
    grid.setSelectedRows([])
    columns = grid.getColumns()
    for columnId, filter of columnFilters
        if filter? 
            column = columns[grid.getColumnIndex(columnId)]
            field = item[column.field]
            return false unless (field? && field.toLowerCase().indexOf(filter.toLowerCase()) > -1) 
    return true

行grid.setSelectedRows([])只是在应用过滤器之前清除所有选定的行。如果您不这样做，那么您在屏幕上看到的选定行与底层选定行不匹配。

更重要的是，return true unless hasFilter线防止任何过滤工作，而网格正在加载，除非用户已经实际输入到其中一个框。我发现，当通过http加载批量JSON数据的大型数据集时，这对网格的性能有很大的影响。

下面是设置hasFilter标志的输入框处理程序:

$(grid.getHeaderRow()).delegate(':input', 'change keyup', (e) ->
    columnId = $(this).data('columnId')
    if columnId?
        columnFilters[columnId] = $.trim($(this).val())
        hasFilter = true
        dataView.refresh()
)