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

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

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

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

 

通过查看源码

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，小老哥、小老弟、小老妹儿们可以去看一下，如果说的不对，可以私信哥们或者帖子留言。

2、解决思路

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

 

3、解决方案：

假设insertRow的方法名为addRow()

function addRow(index, row, target){
    var dataArr = $('#tableId').bootstrapTable('getData'),
        dataArrLength = dataArr.length,
        nextIndex;
    for(var i = 0; i < dataArrLength; i++){

        // 获取父级元素
        var eleParent;
        if (index < i) {
	        nextIndex = i + 1;
	        eleParent = $detail.parent().parent().find('tr:eq('+nextIndex+')');
        } else {
	        eleParent = $detail.parent().parent().find('tr:eq('+i+')');
        }

        // 获取每个row对应field的值
        // fieldName对应table中初始化时field中的名字
        // 页面中的值依据实际情况而定，例如，select为$('selector').val()
        // td中直接给值的则可以用eleParent.find("td:eq(1)").text()获取
        dataArr[i]['fieldName1'] = eleParent.find("td:eq(1)").text(); 
        dataArr[i]['fieldName2'] = eleParent.find("td:eq(2)").text();
        dataArr[i]['fieldName3'] = eleParent.find("td:eq(3)").text();
        dataArr[i]['fieldName4'] = eleParent.find("td:eq(4)").text();


        // 更新option中的值
        $('#tableId').bootstrapTable('getOptions').data.splice(i, 1, dataArr[i]);


        // 新建下一个row
        var insertRow = row;
        $.each(insertRow, function(name, value){
            insertRow[name] = '';
        });

        // 给下一个row赋值
        var params = {index:index + 1, row:insertRow};

        // 更新新建的row并添加到table中
        $('#tableId').bootstrapTable('insertRow', params);
    }
}

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

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