Bootstrap-Table 扩展 - 在 Table 容器下弹出行下拉列表

Question

我在table的每一行中使用了一个bootstrap下拉列表，它使用了wenzhixin编写的bootstrap-table extension。下拉菜单本身工作正常，但是，当我打开 table 底部附近的下拉菜单时，它会显示垂直滚动条，并且 table 包含的 div 下会弹出选项。我已经玩了 CSS 一段时间了，没有任何乐趣。

有没有人运行解决这个问题并找到解决方案？

Answer 1

如果您使用 bootstrap-table-contextmenu 扩展，效果很好 https://github.com/prograhammer/bootstrap-table-contextmenu

这将创建切换下拉菜单的按钮

<ul id="userstable-context-menu" class="dropdown-menu">
    <li data-item="edit"><a>Edit</a></li>
    <li data-item="resetPwd"><a>Reset</a></li>
</ul

在你table你补充：

<th class="editButton" data-field="editButton" data-formatter="editFormatter"></th>

Javascript :

$(function() {
    $("#userstable").bootstrapTable({
        pagination: true,
        pageSize: 10,
        pageList: [10, 25, 50, 'All'],
        search: "true",
        showRefresh:"true",
        url: "api/users/{{user.userId}}/{{user.role}}",
        contextMenu: '#userstable-context-menu',
        contextMenuButton: '.userstable-button'
    });
})

$('#userstable').on('contextmenu-item.bs.table', function (e, row, $el) {
        if($el.data("item")== "edit"){
            var x = "do something";
        }
}

function editFormatter(value, row, index) {
        return [
            '<div class="btn-group btn-group-xs">',
            '<button type="button" class="btn btn-default dropdown-toggle userstable-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">',
            '<span class="fa fa-pencil"></span>',
            '<span class="sr-only">Toggle Dropdown</span>',
            '</button></div>'
            ].join('');
    }

Answer 2

这可能有点 "hackish" 但它简单明了。扩展创建 table 和 fixed-table-body class。一旦删除它，它就会在不限制 bootstrap 下拉菜单的情况下呈现。

$('#table').bootstrapTable({
    onPostBody: function(data) {
        $('#table')
            .find('.fixed-table-body')
            .removeClass('fixed-table-body');
    }
});

Bootstrap-Table 扩展 - 在 Table 容器下弹出行下拉列表

Bootstrap-Table Extension - Dropdown in Row Pops Under Table Container

html

css

twitter-bootstrap

bootstrap-table