Bootstrap-table 不能设置 undefined 的属性 'undefined' of undefined。

Question

Bootstrap-table版本：1.16.0。

目标：我想实现表格选择全部和多个的效果。我想实现表格选择全部和多个的效果。

代码：我想实现表格全选和多选的效果。

<table class="table table-bordered" id="order-table">
  <thead>
      <tr>
        <th><input type="checkbox" id="btSelectAll" name="btSelectAll" /></th>
        <th>name1</th>
        <th>name2</th>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="btSelectItem" data-index="586"/></td>
      <td>val1</td>
      <td>val2</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="btSelectItem" data-index="586"/></td>
      <td>val1</td>
      <td>val2</td>
    </tr>            
  </tbody>
</table>

<script type="text/javascript">
  $(function() {
    $table = $('#order-table').bootstrapTable({
      search: false,
      showColumns: false,
      multipleSelectRow: true
    });

  });
</script>

然后我点击了复选框，触发了错误。

问题：控制台出错

bootstrap-table.min.js:10 Uncaught TypeError: Cannot set property 'undefined' of undefined
    at e.value (bootstrap-table.min.js:10)
    at HTMLInputElement.<anonymous> (bootstrap-table.min.js:10)
    at HTMLInputElement.dispatch (jquery.min.js:2)
    at HTMLInputElement.v.handle (jquery.min.js:2)
value   @   bootstrap-table.min.js:10
(anonymous) @   bootstrap-table.min.js:10
dispatch    @   jquery.min.js:2
v.handle    @   jquery.min.js:2

谁能告诉我为什么会出现这种情况，如何解决。或者给我一个正确的例子？

Answer 1

问题出在你的属性上 data-index

你不应该使用 data-index 乱打乱撞 bootstrap-table 获取该索引的行

看到这个小提琴，这个小提琴不会出错的

 https://jsfiddle.net/jdvLbwc3/1/

此外，如果你想在你的 td 那么你应该使用 data-checkbox 属性，如本链接所示 https:/examples.bootstrap-table.com#column-optionscheckbox.html#view-source。

抚摸使用 data-checkbox 属性 https:/jsfiddle.netjdvLbwc33

$(function() {
  $table = $('#order-table').bootstrapTable({
    search: false,
    showColumns: false
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.js></script>
<table class="table table-bordered" id="order-table">
  <thead>
    <tr>
      <th data-checkbox="true"></th>
      <th>name1</th>
      <th>name2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-checkbox="true"></td>
      <td>val1</td>
      <td>val2</td>
    </tr>
    <tr>
      <td data-checkbox="true"></td>
      <td>val1</td>
      <td>val2</td>
    </tr>
  </tbody>
</table>