bootstrapTable 输入数据updateRow防止输入被清空_bootstraptable updaterow-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_33278354/article/details/108352040

本文介绍了一个在使用BootstrapTable时遇到的问题：更新表格数据后，页面上的输入框值被清空。通过调整JS方法，确保了input元素的值在数据更新后得以保留，实现了表格数据的实时编辑和保存。

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

找了半天，终于还是不会被清空了，网上搜出来是下面这样例子，实验后发现表格值是更新进去了，但是页面输入值被清空了。

改进后如下：

1.页面 .bootstrapTable

  columns: [{
                ....,
{
     field: 'remarks',
     title: '备注',
     sortable: true,
     sortName: 'remarks',
	formatter:formInput
   }

2.js方法

		// 拼接input receiveCount字段前端添加的，一定要有value，否则updateRow数据页面上会被清空
		function formInput(value, row, index) {
			return '<input type="text" autocomplete="off" name="remarks" onblur="changeData(' + index + ',this);" placeholder="可编辑数量" value="'
					+ (function () {
						return !row.remarks ? '' : row.remarks
					})()
					+ '">'
		}

    function changeData(index, obj) {
            var value = $(obj).val();
			var name = $(obj).attr('name');
            //通过 index 获取指定的行
            var row =  $('#deviceStateOrderDetail').bootstrapTable('getRowByIndex',index);//行的数据
            //将 input 的值存进 row 中
			row[name] = value;
            console.log(row);
            //更新指定的行，调用 'updateRow' 则会将 row 数据更新到 data 中，然后再重新加载
            $("#deviceStateOrderDetail").bootstrapTable('updateRow',{index: index, row: row});

        }

3.大功告成