bootstrapTable insertRow 增加行后保留原数据

最新推荐文章于 2022-11-11 09:23:14 发布

S海绵宝宝A

最新推荐文章于 2022-11-11 09:23:14 发布

阅读量1.9k

点赞数

分类专栏： java 文章标签： java javascript bootstrap

原文链接：http://www.twom.top/

版权

java 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在使用BootstrapTable时，避免数据丢失，通过`editColumn`方法处理新增列时的数据保存和更新，包括编辑现有列、删除列以及添加新行的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个问题解决了一上午，每次新增一列的时候，都会默认初始化之前的数据，所以在增加列时要先保存之前的数据，在此记录一下以免入坑。

bootstrapTable.insertRow
$.extend({}, item, obj)

以下是对BootstrapTable列操作进行封装，当新增列时可以先调用**sub.editColumn()**方法。

var sub = {
    //编辑列
    editColumn: function() {
    	var dataColumns = [];
		for (var columnIndex = 0; columnIndex < table.options.columns.length; columnIndex++) {
    		if (table.options.columns[columnIndex].visible != false) {
    			dataColumns.push(table.options.columns[columnIndex]);
    		}
    	}
		var params = new Array();
		var data = $("#" + table.options.id).bootstrapTable('getData');
    	var count = data.length;
    	for (var dataIndex = 0; dataIndex < count; dataIndex++) {
    	    var columns = $('#' + table.options.id + ' tr[data-index="' + dataIndex + '"] td');
    	    var obj = new Object();
    	    for (var i = 0; i < columns.length; i++) {
    	        var inputValue = $(columns[i]).find('input');
    	        var selectValue = $(columns[i]).find('select');
    	        var textareaValue = $(columns[i]).find('textarea');
    	        var key = dataColumns[i].field;
    	        if ($.common.isNotEmpty(inputValue.val())) {
    	            obj[key] = inputValue.val();
    	        } else if ($.common.isNotEmpty(selectValue.val())) {
    	            obj[key] = selectValue.val();
    	        } else if ($.common.isNotEmpty(textareaValue.val())) {
    	            obj[key] = textareaValue.val();
    	        } else {
    	            obj[key] = "";
    	        }
    	    }
    	    var item = data[dataIndex];
    	    var extendObj = $.extend({}, item, obj);
    	    params.push({ index: dataIndex, row: extendObj });
    	}
    	$("#" + table.options.id).bootstrapTable("updateRow", params);
    },
    //删除列
    delColumn: function(column) {
    	sub.editColumn();
    	var subColumn = $.common.isEmpty(column) ? "index" : column;
    	var ids = $.table.selectColumns(subColumn);
        if (ids.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        $("#" + table.options.id).bootstrapTable('remove', { field: subColumn, values: ids });
    },
    //添加列
    addColumn: function(row, tableId) {
    	var currentId = $.common.isEmpty(tableId) ? table.options.id : tableId;
    	table.set(currentId);
    	var count = $("#" + currentId).bootstrapTable('getData').length;
    	sub.editColumn();
    	$("#" + currentId).bootstrapTable('insertRow', {
            index: count + 1,
            row: row
        });
    }
};