[英]Get Bootstrap Table column title and filter-control in same row
I have the following Bootstrap Table
.我有以下
Bootstrap Table
。 Some columns in the table have filter-control
and some have title
.表中的某些列具有
filter-control
,而某些列具有title
。 Neither of the columns have both.这两列都没有。 Columns that have the
title
are sortable
.具有
title
的列是sortable
的。
As shown in this fiddle , the filter-control
and title
are being displayed in different rows.如this fiddle所示,
filter-control
和title
显示在不同的行中。 I want to show both in same row.我想在同一行显示两者。 How can I do that?
我怎样才能做到这一点?
HTML HTML
<table id="table"></table>
JS 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'
}]
})
Present Output目前Output
I could not find a table or column option to do that, so I created some jQuery, that makes the table show both in the same row.我找不到执行此操作的表或列选项,因此我创建了一些 jQuery,使表显示在同一行中。
In your example:在您的示例中:
$('[data-field=price]').find('.th-inner').append($('[data-field=price]').find('.filterControl'))
$('th').find('.fht-cell').remove()
The first line moves the filter-control into the title field, the second line removes all the original filter-control wrappers, which have a fixed height and would keep the table-head too heigh.第一行将过滤器控件移动到标题字段中,第二行删除了所有原始过滤器控件包装器,它们具有固定的高度并且会使表头保持过高。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.