$('#tableId').bootstrapTable('insertRow', params} 实现任意位置插入一行，不清空原有数据

以你之姓@ 2022-04-03 15:58 541阅读 0赞

### 1、为什么$('\#tableId').bootstrapTable('insertRow', params\} 导致之前insertRow的数据被清空？ ###

可以看到当我们第一次添加一行之后填入必要信息之后，页面没有任何问题。

![20181223164021738.png][]

但当我们填好这一行的内容后，继续插入一行的之后，第一个可编辑行数据被清空了，不见了，，WTF??????

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW54aWFveXUwMDI_size_16_color_FFFFFF_t_70][]

通过查看源码

**insertRow的源码**

BootstrapTable.prototype.insertRow = function (params) {
        if (!params.hasOwnProperty('index') || !params.hasOwnProperty('row')) {
            return;
        }
        this.data.splice(params.index, 0, params.row); // 插入一条空的option记录
        this.initSearch();  //每次插入完数据又重新查询了一次
        this.initPagination();
        this.initSort();
        this.initBody(true);
    };

发现是由于**insertRow()**方法调用了 **initSearch()** 方法

进而导致  ——> 重新把 this.options.data 数据初始化了，即页面跟第一次查询结果一样，然后老铁就去查了一下别人如何解决这个问题，有个老铁用的onchange去监听每个字段的变化，然后每次改变后的值放入this.options.data中，但是哥们试了一下，并没有用，原因在于onchange事件和insertRow事件是先执行insertRow事件，onchange会被覆盖掉，不执行，这个老铁帖子链接：[https://www.cnblogs.com/wdcwy/p/6540848.html][https_www.cnblogs.com_wdcwy_p_6540848.html]，小老哥、小老弟、小老妹儿们可以去看一下，如果说的不对，可以私信哥们或者帖子留言。

### 2、解决思路 ###

哥们寻思了半宿，觉得还是需要**遍历整个table中的所有data**，并且将已经修改的数据在每次insertRow之**前**更新this.options.data。这样就不必担心会出现改了一个别的没有更新到this.options.data中了。

### 3、解决方案： ###

假设insertRow的方法名为**addRow()**

本文页面采用的加号是bootstrap自带的expandRow，只要设置option中的detailview为true则可以。

如果遇到expandRow需要限制数量的，可在限制数量前添加$('\#tableId').bootstrapTable('collapseAllRows');方法即可。

[20181223164021738.png]: /images/20220403/ae57bbc63e844a9fba87affe783a07ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW54aWFveXUwMDI_size_16_color_FFFFFF_t_70]: /images/20220403/8229f1aee0934f059098f314709e57c9.png
[https_www.cnblogs.com_wdcwy_p_6540848.html]: https://www.cnblogs.com/wdcwy/p/6540848.html