我将 DataTable 与 Fixed Columns 扩展一起使用,并使用 Bootstrap 进行样式设置。我设置为固定的列包含 Bootstrap's dropdown 元素。 问题是当我单击下拉元素时,我的固定列显示滚动条,或者有时
overflow
被隐藏为
下面是我的数据表初始化的代码
var oTable = $('table').dataTable( {
bFilter : false,
ordering: false,
sScrollX: "100%",
fixedColumns : {
leftColumns : 0,
rightColumns : 1
},
pagingType : "full_numbers",
"sDom" : '<"top">rt<"bottom"ifp><"clear">',
} );
这里是JS 小提琴链接。有人有这方面的经验或者我该如何解决这个问题?谢谢。
您需要将 dropmenu 附加到正文和一些 css 来隐藏固定列溢出。
您可以根据需要调整代码。
查看工作演示此处
CSS:
.DTFC_RightBodyLiner {
overflow: hidden!important;
}
JS:
$(document).ready(function() {
var oTable = $('table').dataTable({
bFilter: false,
ordering: false,
sScrollX: "100%",
fixedColumns: {
leftColumns: 0,
rightColumns: 1
},
pagingType: "full_numbers",
"sDom": '<"top">rt<"bottom"ifp><"clear">',
});
$('.btn').click(function() {
dropmenuPostion();
})
function dropmenuPostion() {
// hold onto the drop down menu
var dropdownMenu;
// and when you show it, move it to the body
$(window).on('show.bs.dropdown', function(e) {
// grab the menu
dropdownMenu = $(e.target).find('.dropdown-menu');
// detach it and append it to the body
$('body').append(dropdownMenu.detach());
// grab the new offset position
var eOffset = $(e.target).offset();
// make sure to place it where it would normally go (this could be improved)
dropdownMenu.css({
'display': 'block',
'top': eOffset.top + $(e.target).outerHeight(),
'left': eOffset.left - 50
});
});
// and when you hide it, reattach the drop down, and hide it normally
$(window).on('hide.bs.dropdown', function(e) {
$(e.target).append(dropdownMenu.detach());
dropdownMenu.hide();
});
}
});
似乎没有办法使用纯 CSS 或 bootstrap 根据下拉宽度来扩展列的宽度。我认为您只需设置列固定宽度即可使其更宽,如下所示:
"columnDefs": [
{ "width": "160px", "targets": 6 }
],
您还可以通过添加类来使按钮与列一样宽
btn-block
:
<button class="btn btn-primary dropdown-toggle btn-block"...
您需要使用引导下拉按钮添加 z-index 并删除 z-index css 到固定列。
<script>
$(document).ready(function() {
var table= $('#examples-table').DataTable({
processing: true,
serverSide: true,
scrollX: true,
fixedColumns:{
left: 1,
right: 1,
},
ajax: {
// code ..
},
columns: [
// code ...
],
});
$(document).on('click', '.link-focus', function(e){
$(this).closest("td").addClass("z-index-3");
});
});
</script>