带有 Bootstrap 下拉菜单的 DataTable 固定列答案

【问题标题】：DataTable Fixed Column with Bootstrap's dropdown带有 Bootstrap 下拉菜单的 DataTable 固定列
【发布时间】：2016-11-30 07:29:16
【问题描述】：

我使用 DataTable 和 Fixed Columns 扩展名和 Bootstrap 样式。我设置为固定的列包含Bootstrap's dropdown 元素。问题是当我单击下拉元素时，我的固定列显示滚动条，或者有时 overflow 被隐藏为

下面是我的dataTable的初始化代码

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 Fiddle Link。有没有人有这方面的经验或者我该如何解决这个问题？谢谢。

【问题讨论】：

标签： jquery twitter-bootstrap datatables

【解决方案1】：

您需要将下拉菜单附加到正文和一些 css 以隐藏固定列溢出。

您可以根据需要调整代码。

查看工作演示HERE

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();
    });
  }

});

【讨论】：

谢谢先生！ ...它似乎解决了问题。一个小错误在一个下拉菜单仍处于打开状态时无法单击另一个。
耶....！谢谢你，先生。我得到了它。作为您的代码，事件将一次又一次地嵌套。现在我在文档准备好后添加了$(window).on('show.bs.dropdown' 和$(window).on('hide.bs.dropdown' 的事件处理。它一切正常。非常感谢先生。这是您命令 jsfiddle.net/jwyeuh8m/22 时 JS Fiddle 中最后更新的代码。祝您有美好的一天。
一个问题！这会导致与Bootstrap Select 不一致
@Cataclysm 您可以修改上面的代码并将 dropemenu 仅针对 table。例如：dropdownMenu = $(e.target).find('.table .dropdown-menu');

【解决方案2】：

似乎没有办法使用纯 CSS 或引导程序根据下拉宽度扩展列的宽度。我认为您可以像这样设置列固定宽度来使其更宽：

      "columnDefs": [
    { "width": "160px", "targets": 6 }
  ],

您还可以通过添加类btn-block 使按钮与列一样宽：

<button class="btn btn-primary dropdown-toggle btn-block"...

【讨论】：

我认为仅仅扩大列的宽度是不够的。它不能解决这个问题，因为最后一行仍然隐藏了overflow。可以看到更新后的 JSFiddle jsfiddle.net/jwyeuh8m/18