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

Question

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

如this fiddle所示，filter-controlandtitle显示在不同的行中。我想在同一行显示两者。我怎样才能做到这一点？

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'
    }]
})

当前输出

标签： javascriptbootstrap-table

Answer 1

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

在您的示例中：

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

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