Bootstrap table 如何使用数据格式化程序中的输入框更改值

Question

我正在使用 bootstrap table 来显示我的数据。我在像这样的列上使用了数据格式化程序：

function inputFormatter(value, row){
    return '<input class="form-control data-input" value="' + value + '">';
}

我的bootstrap专栏：

<th data-field="channel_sku" data-align="center" data-formatter="inputFormatter">Channel SKU</th>

现在数据在该列的输入框中显示为值，例如：

现在的问题是，当我更改输入框中的文本时，该单元格的值没有改变。即当我使用 ajax 将数据发送到我的后端时，我得到了旧数据。输入框的值属性也没有更改为新值。

那么如何更改文本输入单元格的值？

Answer 1

周一我开始使用这个库，但我也充满了疑问，很遗憾今天的 SO 中显然没有足够的信息或问题。

这里的问题是输入的值与 bootstrapTable('getData') 方法获取的输入值不同，此方法获取符合对象的属性值，这些对象符合您传递给 table data参数，先构造table。当您更改输入的值时，table 的数据对象保持不变，这就是您不断获取旧数据的原因，每次输入触发 [=14= 时，您都需要更新数据对象上的值] 事件，这可以通过 bootstrapTable('updateCell', params) 方法实现，该方法接收手册中描述的以下参数。

index: the row index. field: the field name. value: the new field value. To disable table re-initialization you can set {reinit: false}

我今天想到了这个解决方法，因为我也想在我的列上实施输入，这是我的列属性：

{field: 'varillasEnLecho', title: 'Varilla en lecho', formatter: function(value, row, index) {
    return '<input class="form-control data-input" value="' + value + '" row-index="' + index + '" field="varillasEnLecho"  onchange="updateCell($(this))">';
  }
}

这是输入变化时触发的函数：

function updateCell(caller) {
  var table = caller.parents('table');
  var newData = {
    index: caller.attr('row-index'), field: caller.attr('field'), value: caller.val(), reinit: false
  };

  table.bootstrapTable('updateCell', newData);

  var data = JSON.stringify(table.bootstrapTable('getData'));
  console.log(data);
}

运行正常，截图如下：

前言：Bootstrap Table 有一个可爱的扩展名为 x-editable that manages editable cells and automatically updates the data model the table is based on, you can see how it is implemented in this example, and here's how it looks:

你想用它做什么，干杯。

Answer 2

我最终也找到了解决方法。我在单击 table 时捕获了事件，将行索引和字段存储在全局变量中。

每次单击一个单元格时，这些全局变量的值将更改为该单元格的新值。

$('#sku-map-table').bootstrapTable({
    onClickCell: function (field, value, row, $element) {
        $rowIndex = $element.closest('tr').attr('data-index');
        $field = field;
    }
});

然后我使用 data-input class 捕获了输入框，并用新值更新了单元格的值。

$(document).on('change', '.data-input', function(event) {
    $new_val = $(this).val();
    $('#sku-map-table').bootstrapTable('updateCell', {index: $rowIndex, field: $field, value: $new_val});
});

总结就是改变输入框的值，必须点击相应的单元格，我用的就是这个。

Bootstrap table 如何使用数据格式化程序中的输入框更改值

Bootstrap table how to change value using input box in data-formatter

jquery

twitter-bootstrap-3

bootstrap-table