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

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

2022/08/15 周一

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

---

问题描述：

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

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

这部分的代码：

{
    title: '                     操作                     ',
    align: 'center',
    formatter: function(value, row, index) {
        var actions = [];
        actions.push('
\n' +
            '    经济上传' +
            '        \n' +
            '    
\n' +
            '        
\n' +
            '            + row.policyNo + '\')">上传公估报告\n' +
            '        
\n' +
            '        
\n' +
            '            + row.policyNo + '\')">上传损失确认报告书\n' +
            '        
\n' +
            '    
\n' +
            '
  ');
        actions.push('+ row.id + '\')">详细 ');
        return actions.join('');
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

解决方案：

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

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

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

代码修改：

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

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

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

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

修改后的代码：

{
    title: '                     操作                     ',
    align: 'center',
    formatter: function(value, row, index) {
        var actions = [];
        actions.push('
+ (index == ($('#bootstrap-table').bootstrapTable('getOptions').totalRows-1) ? 'dropup' : 'dropdown') + '">\n' + //表格最后一行改为上拉列表
            '    经济上传' +
            '        \n' +
            '    
\n' +
            '        
\n' +
            '            + row.policyNo + '\')' + ($('#bootstrap-table').bootstrapTable('getOptions').totalRows==1 ? ' style="line-height: 16px;"' : '')+ '">上传公估报告\n' + // 如果只有一行数据，上拉列表也会被遮挡，需调整行高
            '        
\n' +
            '        
\n' +
            '            + row.policyNo + '\')"' + ($('#bootstrap-table').bootstrapTable('getOptions').totalRows==1 ? ' style="line-height: 16px;"' : '')+ '>上传损失确认报告书\n' +
            '        
\n' +
            '    
\n' +
            '
  ');
        actions.push('+ row.id + '\')">详细 ');
        return actions.join('');
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

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

如果是最后一行就用dropup上拉，其他就还是dropdown下拉。
另外：如果只有一行数据的话，上拉列表也会被上边挡住，所以只能调整一下行高了。