Question

bootstrap-table 无法设置未定义的属性“undefined”

2020-05-13

11455

javascript twitter-bootstrap bootstrap-table

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 ，因为在 checkbok 上选中/取消选中 bootstrap-table 会获取该特定索引的行

请参阅此小提琴，此小提琴不会出错

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

此外，如果您想在 td 中使用 chcekbox，那么您应该使用 data-checkbox 属性，如以下链接所示 https://examples.bootstrap-table.com/#column-options/checkbox.html#view-source

使用 data-checkbox 属性的小提琴 https://jsfiddle.net/jdvLbwc3/3/

$(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>

Answer 2

在我的例子中，jquery.min.js 在 bootstrap-table.min.js 之后加载。切换顺序后，错误解决。

Gopi

2022-11-08