开启detailView的Bootstrap-table新增行后无详情按钮如何解决

问题原因 #

Bootstrap-table是数据驱动的组件，内部会独立维护一份表格数据源：

• 你直接通过jQuery的append方法往DOM加行，没有同步更新插件内部的数据源，所以新增行没有经过插件的渲染逻辑，自然不会生成detailView对应的+号按钮
• 调用refresh方法时，插件会基于内部存储的旧数据源重新渲染表格，你手动添加的DOM行会被直接覆盖，所以看不到新增内容

可行解决方法 #

方法1：使用插件自带的append方法新增行（最推荐） #

不要直接操作DOM，调用Bootstrap-table官方提供的append方法新增数据，插件会自动同步数据源、渲染行元素，自动生成detailView按钮，无需额外刷新。
示例代码：

// 单个新增，参数为行数据对象，属性和表格列的field对应
$('table#orders').bootstrapTable('append', {
  // 替换成你表格列对应的field和值即可
  date: 'Some Date'
})

// 批量新增传数组即可
// $('table#orders').bootstrapTable('append', [
//   {date: '行1数据'},
//   {date: '行2数据'}
// ])

方法2：手动初始化新增DOM行 #

如果你确实需要先自行拼接tr DOM再加入表格，可以在append之后调用initRow方法初始化新增行，插件会为该行补充事件、渲染detailView按钮，不会覆盖已有内容。
示例代码：

// 拼接并插入新行
const $newTr = $('<tr><td>Some Date</td></tr>').appendTo('table#orders tbody')
// 初始化新增行
$('table#orders').bootstrapTable('initRow', $newTr)

方法3：全量更新数据源 #

如果是批量修改数据的场景，可以先获取当前表格的所有数据，加入新数据后调用load方法重绘整个表格。
示例代码：

// 获取当前表格所有数据
const allData = $('table#orders').bootstrapTable('getData')
// 加入新行数据
allData.push({
  date: 'Some Date'
})
// 重新加载数据，自动重绘所有行
$('table#orders').bootstrapTable('load', allData)

内容的提问来源于stack exchange，提问作者Arif