Bootstrap-Table扩展 - 表容器下的行弹出窗口中的下拉列表

Question

我在使用wenzhixin编写的bootstrap-table extension的表的每一行中使用引导下拉列表。下拉列表本身工作正常，但是，当我在表格底部附近打开一个下拉列表时，它会显示垂直滚动条，并在表格的包含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

这可能有点“hackish”，但它简单明了。扩展名创建了一个$('#table').bootstrapTable({ onPostBody: function(data) { $('#table') .find('.fixed-table-body') .removeClass('fixed-table-body'); } }); 类的表。一旦删除它就会在不限制引导程序下拉的情况下进行渲染。

kubectl get svc