0

25,000 行以上のスリックグリッドがあります。正常に動作し、非常に高速な列フィルタリング (例を参照) をセットアップしました。

CheckboxSelectColumnプラグインを追加しました（例を参照）。これが機能している間、フィルタリングの速度が低下しました。すべてがまだ機能しますが、非常に遅くなります。

提供してフィルタリングを最適化しようとしましたがRefreshHints（例を参照）、喜びはありません。

フィルタリングとチェックボックスと大きな行数の組み合わせだけですか、それとも何か間違っていますか?

関連するコード (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
4

1 に答える 1

1

おっと、なぜgrid.setSelectedRows([])フィルターを呼び出しているのですか?!?
データを更新するたびに 25,000 回呼び出されます。

完全に無意味であるだけでなく、(選択に基づいて) 状態を同期する必要があるため、チェックボックスの選択列を使用すると、さらに速度が低下します。

于 2013-03-07T18:49:57.883 に答える