Bootstrap-table点击PLUS图标展示隐藏列标题及对应值问题咨询

核心问题原因 #

• 原函数仅返回了隐藏列的字段名数组，后续拼接时未添加分隔符导致所有字段名连为一整串
• 未调用bootstrap-table的getData接口获取行数据，因此无法拿到对应字段的列值
• 换行不生效是因为分隔符和输出场景不匹配：HTML渲染场景需用<br>、alert/控制台输出场景需用\n

完整实现代码 #

1. 封装获取隐藏列+对应值的方法 #

function getHiddenColumnsInfo(targetRow) {
  // 获取所有隐藏列配置
  const hiddenColumns = $('#fresh-table').bootstrapTable('getHiddenColumns')
  const outputList = []
  hiddenColumns.forEach(column => {
    // 按要求拼接单条信息，无值时默认显示-
    const line = `${column.field}: ${column.title} ${targetRow[column.field] ?? '-'}`
    outputList.push(line)
  })
  return outputList
}

2. 点击PLUS图标触发逻辑 #

如果是展示当前点击行的隐藏列值，参考如下代码：

$('#fresh-table').on('click', '.plus-icon', function() {
  // 获取当前点击行的原始数据
  const currentRow = $(this).closest('tr').data('bootstrap.table.row')
  const infoList = getHiddenColumnsInfo(currentRow)
  
  // 场景1：alert弹窗展示，用\n换行
  alert(infoList.join('\n'))

  // 场景2：输出到HTML元素中，用<br>换行
  // $('#hidden-info-container').html(infoList.join('<br>'))
})

如果要展示全表第一行的隐藏列值，直接获取表格数据即可：

$('.plus-icon').on('click', function() {
  // 获取表格所有行数据，取第一行
  const firstRow = $('#fresh-table').bootstrapTable('getData')[0]
  const infoList = getHiddenColumnsInfo(firstRow)
  alert(infoList.join('\n'))
})

内容的提问来源于stack exchange，提问作者Richard van Breugel