【问题标题】:Slickgrid filtering is crippled when CheckboxSelectColumn plugin is used使用 CheckboxSelectColumn 插件时,Slickgrid 过滤功能失效
【发布时间】:2013-03-08 02:49:57
【问题描述】:

我有一个 25,000 多行的 slickgrid。我已经设置了列过滤(请参阅example),它运行良好且速度非常快。

我现在添加了CheckboxSelectColumn 插件(请参阅example),虽然这有效,但它削弱了过滤的速度。一切仍然有效,只是速度慢了很多。

我尝试通过提供RefreshHints(参见example)来优化过滤,但没有任何乐趣。

只是过滤加上复选框加上大行数的组合,还是我做错了什么?

这里是相关的代码(CoffeeScript)。

设置列过滤器

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

            # Trying to optimise using RefreshHints
            newLen = newVal?.length
            oldlen = columnFilters[columnId]?.length ? 0
            isNarrowing = newLen > oldlen
            isExpanding = newLen < oldlen
            renderedRange = grid.getRenderedRange()
            dataView.setRefreshHints({
                ignoreDiffsBefore: renderedRange.top,
                ignoreDiffsAfter: renderedRange.bottom + 1,
                isFilterNarrowing: isNarrowing,
                isFilterExpanding: isExpanding
            })
            dataView.refresh()
    )

    grid.onHeaderRowCellRendered.subscribe((e, args) ->
        node = $(args.node)
        node.empty()
        id = args.column.id
        if id == '_checkbox_selector'
            node.hide()
            return
        placeholder = 'filter by ' + id
        html = '<input type="text" placeholder="' + placeholder + '">'
        $(html)
            .data('columnId', id)
            .val(columnFilters[id])
            .appendTo(node)
            .focus(()->$(this).attr('placeholder', ''))
            .blur(()-> $(this).attr('placeholder', placeholder) if $(this).val()?)
    )

设置 CheckboxSelect 插件

setupCheckboxSelect:() ->
    checkboxPlugin = new Slick.CheckboxSelectColumn({ cssClass: "slick-cell-checkboxsel" });
    columns.unshift(checkboxPlugin.getColumnDefinition());
    grid.setColumns(columns);
    grid.registerPlugin(checkboxPlugin);

过滤功能

filter: (item) =>
    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

【问题讨论】:

  • 很难说没有调试/分析你的代码。你可以在 jsfiddle.net 上发布一个 repro 吗?

标签: slickgrid


【解决方案1】:

哇,你为什么在过滤器中调用grid.setSelectedRows([])?!?
每当您刷新数据时,它都会被调用 25'000 次。

除了完全没有意义之外,当您使用复选框选择列时,它确实会减慢速度,因为它需要同步状态(基于选择)。

【讨论】:

  • 我这样做是因为我是一个糟糕、糟糕、糟糕的编码员 - 我承认。删除那条腐烂的线完全解决了我的问题,也给我的加载速度带来了相当大的性能提升。我满怀感激。现在我只需要找到一种在应用过滤器时正确维护所选行的非愚蠢方法。你可以告诉我有一个巧妙的方法可以做到这一点。
  • DataView.syncGridSelection(grid, keepHiddenRows)
猜你喜欢
  • 2012-02-26
  • 1970-01-01
  • 2015-04-12
  • 2013-02-21
  • 2016-08-16
  • 1970-01-01
  • 1970-01-01
  • 2017-12-17
  • 1970-01-01
相关资源
最近更新 更多