若依表格最后一行数据的按钮下拉列表被遮挡 & bootstrap上拉列表

2022/08/15 周一

在若依的Issues里找了好久，自己也提了 表格最后一行数据的按钮下拉列表被遮挡，都没找到解决办法，再去看看bootstrap，原来已经提供了上拉列表，这就可以解决了。

问题描述：

正常按钮下拉列表的显示是这样的：

最后一行的下拉列表会被外层遮盖

这部分的代码：

{
    title: '                     操作                     ',
    align: 'center',
    formatter: function(value, row, index) {
        var actions = [];
        actions.push('<div class="btn-group">\n' +
            '    <button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">经济上传' +
            '        <span class="caret"></span></button>\n' +
            '    <ul class="dropdown-menu" role="menu">\n' +
            '        <li>\n' +
            '            <a  οnclick="uploading(\'' + row.policyNo + '\')">上传公估报告</a>\n' +
            '        </li>\n' +
            '        <li>\n' +
            '            <a  οnclick="uploading2(\'' + row.policyNo + '\')">上传损失确认报告书</a>\n' +
            '        </li>\n' +
            '    </ul>\n' +
            '</div>&nbsp;&nbsp;');
        actions.push('<a class="btn btn-info btn-xs" href="#" οnclick="$.operate.detail(\'' + row.id + '\')"><i class="fa fa-search"></i>详细</a> ');
        return actions.join('');
    }
}

按钮和列表都放在一个class="btn-group"的div里。

解决方案：

一开始试了z-index调大、加linestyle样式、设置bootstrap-table的options行高等，都没有解决。

后来看了下Bootstrap（参考Bootstrap5 下拉菜单 | 菜鸟教程 指定向上弹出的上拉菜单），原来Bootstrap有提供上拉菜单，在div 元素上加 dropup 类，就可以改为上拉的了。

所以我只要知道总行数，再获取到最后一行，让其下拉列表变成上拉，就不会被遮挡了：

代码修改：

第6行的 btn-group 后面添加：

 ' + (index == ($('#bootstrap-table').bootstrapTable('getData').length-1) ? 'dropup' : 'dropdown') + '

第11&14行a标签的 ) 和 "> 之间添加：

' + ($('#bootstrap-table').bootstrapTable('getData').length==1 ? ' style="line-height: 16px;"' : '')+ '

修改后的代码：

{
    title: '                     操作                     ',
    align: 'center',
    formatter: function(value, row, index) {
        var actions = [];
        actions.push('<div class="btn-group ' + (index == ($('#bootstrap-table').bootstrapTable('getData').length-1) ? 'dropup' : 'dropdown') + '">\n' + //表格最后一行改为上拉列表
            '    <button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">经济上传' +
            '        <span class="caret"></span></button>\n' +
            '    <ul class="dropdown-menu" role="menu">\n' +
            '        <li>\n' +
            '            <a  οnclick="uploading(\'' + row.policyNo + '\')' + ($('#bootstrap-table').bootstrapTable('getData').length==1 ? ' style="line-height: 16px;"' : '')+ '">上传公估报告</a>\n' + // 如果只有一行数据，上拉列表也会被遮挡，需调整行高
            '        </li>\n' +
            '        <li>\n' +
            '            <a  οnclick="uploading2(\'' + row.policyNo + '\')"' + ($('#bootstrap-table').bootstrapTable('getData').length==1 ? ' style="line-height: 16px;"' : '')+ '>上传损失确认报告书</a>\n' +
            '        </li>\n' +
            '    </ul>\n' +
            '</div>&nbsp;&nbsp;');
        actions.push('<a class="btn btn-info btn-xs" href="#" οnclick="$.operate.detail(\'' + row.id + '\')"><i class="fa fa-search"></i>详细</a> ');
        return actions.join('');
    }
}

我的bootstrap-table表格id没有修改，如果修改了id的话这里记得改一下$(‘#bootstrap-table’)

如果是最后一行就用dropup上拉，其他就还是dropdown下拉。

另外：如果只有一行数据的话，上拉列表也会被上边挡住，所以只能调整一下行高了。

关于bootstrap-table获取数据条数的方法：

$(‘#bootstrap-table’).bootstrapTable(‘getData’).length 获取当前页实际数据条数

$(‘#bootstrap-table’).bootstrapTable(‘getOptions’).pageSize 获取每页可显示行数（不是实际数据条数）

$(‘#bootstrap-table’).bootstrapTable(‘getOptions’).totalRows 获取到总数据条数