在同一行中获取 Bootstrap 表列标题和过滤器控件

Question

我有以下 Bootstrap Table。表中的某些列具有 filter-control，某些列具有 title。两列都没有。具有 title 的列是 sortable。

如此 fiddle 所示，filter-control 和 title 显示在不同的行中。我想在同一行中显示两者。我该怎么做？

HTML

<table id="table"></table>

JS

    $('#table').bootstrapTable({
    filterControl: true,
    showSearchClearButton: true,
    columns: [{
        field: 'id',
        title: 'Item ID',
    sortable: true
    }, {
        field: 'name',
        title: 'Item Name',
    sortable: true
    }, {
        field: 'price',
        // title: 'Item Price',
        filterControl: 'select',
    filterControlPlaceholder: 'Item Price'
    }],
    data: [{
        id: 1,
        name: 'Item 1',
        price: '$1'
    }, {
        id: 2,
        name: 'Item 2',
        price: '$2'
    }]
})

当前输出

Answer 1

我找不到可以执行此操作的表或列选项，因此我创建了一些 jQuery，使表在同一行中显示。

在您的示例中：

$('[data-field=price]').find('.th-inner').append($('[data-field=price]').find('.filterControl'))
$('th').find('.fht-cell').remove()

第一行将过滤器控件移动到标题字段中，第二行删除了所有原始过滤器控件包装器，这些包装器具有固定的高度并且会使表头保持过高。