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

Question

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

即：搜索词：“omato”

返回：自动机，番茄等。

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

这是我用来实现这一点的咖啡脚本代码：

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()
)