bootstrap table新增编辑行时上一行填写的数据被清空

 

使用bootstrap-table insertRow新增一可编辑行,填入数据后,点击新增下一行时,发现上一行数据被清空了:

bootstrap table新增编辑行时上一行填写的数据被清空_第1张图片

bootstrap table新增编辑行时上一行填写的数据被清空_第2张图片

查看bootstrap-table 源码:

BootstrapTable.prototype.insertRow = function (params) {
        if (!params.hasOwnProperty('index') || !params.hasOwnProperty('row')) {
            return;
        }
        this.options.data.splice(params.index, 0, params.row);
        this.initSearch();
        this.initPagination();
        this.initSort();
        this.initBody(true);
    };

其中 params 是我们前台使用 $('#tSableId').bootstrap('insertRow',{index:rowIndex,row:rowObj}); 传入的新增行JSON格式数据对象,新增行的数据会存放在 this.options.data 中,然后调用 this.initSearch(); 重新查一遍  this.options.data 中的数据。

bootstrap table新增编辑行时上一行填写的数据被清空_第3张图片

如上图,每次新增行时,上一次新增的数据在 this.options.data 中始终是当时 insertRowparams 的数据,在新增行编辑的数据根本未同步到 this.options.data 中,所以在下一次触发 insertRow 时,会将上一新增行初始化为编辑前的状态,因此需要解决的问题是:在下一次触发 insertRow 时,将我们页面编辑的数据同步到 this.options.data .

查看bootstrapTable文档:

bootstrap table新增编辑行时上一行填写的数据被清空_第4张图片

发现 updateRow 方法传入参数也是 params,insert 是插入新行,update是更新指定行(~~新增行肯定可以),查看源码:

BootstrapTable.prototype.updateRow = function (params) {
        var that = this;
        var allParams = $.isArray(params) ? params : [ params ];

        $.each(allParams, function(i, params) {
            if (!params.hasOwnProperty('index') || !params.hasOwnProperty('row')) {
                return;
            }
            $.extend(that.options.data[params.index], params.row);
        });

        this.initSearch();
        this.initPagination();
        this.initSort();
        this.initBody(true);
    };

其中  $.extend(that.options.data[params.index], params.row);  就是将 this.options.data 中指定行 index 数据同步更新。

因此,解决方案就是:在下一次新增行前,先将上一次新增行的数据通过 updateRow 方法同步到当前页 bootstrap table 的数据源,主要的工作就是获取上一次新增行的索引和编辑后的数据。

//addIndex表示当前新增行索引
            //rowIndex表示表格原有索引
            if( addIndex!=rowIndex ) {
                var dataIndex = addIndex -1;
                var columns = $('#listTable tr[data-index="'+dataIndex+'"] td.editable');
                var obj = new Object();
                for (var i=0; i) {
                    var td = $(columns[i]).find('input');
                    var key = colStr[i];
                    obj[key] = td.val();

                }
                var params = {index:(addIndex-1),row:obj};
                listTab.bootstrapTable("updateRow",params);
            }

 效果如下:

bootstrap table新增编辑行时上一行填写的数据被清空_第5张图片

bootstrap table新增编辑行时上一行填写的数据被清空_第6张图片

 

转载于:https://www.cnblogs.com/dandelZH/p/10171684.html

你可能感兴趣的:(bootstrap table新增编辑行时上一行填写的数据被清空)