Question

我正在使用bootstrap-table，其中一列是下拉菜单：

<table data-toggle="table" id="table" data-unique-id="id">
  <thead>
    <tr>
      <th data-field="type">type</th>
      <th data-field="id">id</th>
    </tr>
  </thead>
  <tbody>
 </tbody>
</table>

但是，使用以下方法追加新行时

$('#table').bootstrapTable('append', {
    id: newId,
    type: '<select name="type" class="select-type"><option value="foo">foo</option><option value="bar">bar</option></select>'
  })

以前的行中选择的option未保存。

Demo

更新：我的回答中的方法适用于小型表，但在100多行的表中使用它非常慢，所以我仍在寻找解决方案。

Answer 1

我添加了一个事件监听器，它使用bootstrap-table的api在选择该选项后更新值。

$('#table').on('change', '.select-type', function(eventt) {
    const elem = eventt.target;
    elem[elem.selectedIndex].setAttribute('selected', true);
    const tr = elem.parentNode.parentNode;
    const rowId = tr.getAttribute("data-uniqueId");
    const row = $('#table').bootstrapTable('getRowByUniqueId', rowId);
    row['type'] = elem.outerHTML;
    $('#table').bootstrapTable('updateByUniqueId', [{id: rowId, row: row}]);
});

在Bootstrap表中追加一行会改变以前的行

1 个答案: