slickgrid - 列レベルのヘッダーを使用して Slickgrid をフィルタリングするときに部分一致を実行する方法は?

Question

固定ヘッダー行を使用して列レベルのフィルターを実装する場合、部分一致のセルを返すにはどうすればよいですか?

例：検索語：「オマト」

戻り値: オートマトン、トマトなど

Answer 1

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

今ではとても明白なようです:)

Answer 2

これを達成するために使用するcoffeescriptコードは次のとおりです。

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 unless hasFilterは、ユーザーがボックスの 1 つに実際に入力しない限り、この行はグリッドの読み込み中にフィルタリング作業を防止することです。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()
)