Question

我有一个25,000多行的滑板。我有设置列过滤（请参阅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

Answer 1

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

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

使用CheckboxSelectColumn插件时，Slickgrid过滤会受到影响

1 个答案: