Bootstrap-Table擴展-表容器下的行彈出菜單中的下拉菜單

Question

我在使用wenzhixin編寫的bootstrap-table擴展名的表的每一行中使用bootstrap下拉列表。 下拉菜單本身可以正常工作，但是，當我在表格底部附近打開一個下拉菜單時，它會顯示垂直滾動條，並且選項會在表格的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

在表中添加：

<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

這可能有點“駭人聽聞”，但它簡單明了。 該擴展使用fixed-table-body類創建表。 刪除后，它將在不限制引導程序下拉菜單的情況下進行渲染。

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