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

时间:2011-04-07 06:20:11

标签: slickgrid

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

即: 搜索词:“omato”

返回:automator,番茄等。

2 个答案:

答案 0 :(得分:5)

在示例中的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;
        }
    }
}

现在似乎很明显:)

答案 1 :(得分:0)

以下是我用来实现此目的的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()
)