bootstrap table 列表增加输入框并保存输入的值不清除
时间: 2024-02-25 08:58:59 浏览: 310
要在 Bootstrap Table 中的每一行中添加输入框,并保存输入的值不被清除,可以按照以下步骤操作:
1. 在列定义中添加一个自定义列,该列包含一个输入框:
```javascript
{
field: 'input',
title: 'Input',
formatter: function(value, row, index, field) {
return '<input type="text" class="form-control input-sm" value="' + value + '">';
},
events: {
'keyup input': function(e, value, row, index) {
row[field] = $(this).val();
}
}
}
```
2. 在表格初始化中启用编辑模式:
```javascript
$('#table').bootstrapTable({
editable: true,
onEditableSave: function(field, row, oldValue, $el) {
// 在这里可以添加保存逻辑,例如将数据发送到服务器
}
});
```
3. 在 `keyup` 事件中更新行数据,以便在保存时可以获取到最新的输入值。
这样,当用户在输入框中输入内容并按下 Enter 键时,行数据将被更新并保存。如果用户取消编辑,输入框中的值将被恢复到之前的值,因为 Bootstrap Table 会自动处理取消编辑的情况。
阅读全文