bootstrap table新增編輯行時上一行填寫的數據被清空

 

使用bootstrap-table insertRow新增一可編輯行，填入數據後，點擊新增下一行時，發現上一行數據被清空了：

查看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 中的數據。

如上圖，每次新增行時，上一次新增的數據在 this.options.data 中始終是當時 insertRow 時 params 的數據，在新增行編輯的數據根本未同步到 this.options.data 中，因此在下一次觸發 insertRow 時，會將上一新增行初始化爲編輯前的狀態，所以須要解決的問題是：在下一次觸發 insertRow 時，將咱們頁面編輯的數據同步到 this.options.data .

查看bootstrapTable文檔：

發現 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<columns.length; 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);
            }

 效果以下：