若依表格最后一行数据的按钮下拉列表被遮挡 & 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> ');
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> ');
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 获取到总数据条数