当前位置：文江博客话题详情

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

发布于 2024-10-31 02:04:15 字数 83 浏览 3 评论 0原文

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

IE：搜索词：“omato”

返回：自动机、番茄等。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

感情废物 2024-11-07 02:04:15

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

现在看起来很明显:)

Under MyFilter in the example replace this loop...

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;
        }
    }
}

with this..

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;
        }
    }
}

Seems so obvious now :)

回复收藏 0 原文

一百个冬季 2024-11-07 02:04:15

这是我用来实现此目的的咖啡脚本代码：

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

Here is the coffeescript code I use to acheive this:

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

The line grid.setSelectedRows([]) just clears any selected rows before applying the filter. If you don't do this then the selected rows you see on-screen do not match the underlying selected rows.

More importantly the return true unless hasFilter line prevents any filtering work whilst the grid is loading, unless the user has actually typed into one of the boxes. I have found that this makes quite a difference to the performance of the grid when loading large datasets in batches of JSON data over http.

Here is the input box handler that sets the hasFilter flag:

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

回复收藏 0 原文

~没有更多了~