$('#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');方法即可。

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值