【发布时间】: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