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

disho6za 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(540)

引导表版本：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

有人能告诉我为什么会发生这种情况，以及如何解决它吗？或者给予我一个正确的例子？

twitter-bootstrap

来源：https://stackoverflow.com/questions/61765649/bootstrap-table-cannot-set-property-undefined-of-undefined

2条答案

按热度按时间

x7rlezfr1#

The issue is with your attribute data-index
You should not use data-index randomly as on checkbok check/uncheck bootstrap-table gets row of that particular index
See this fiddle, this fiddle won't give error

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

Also if you want to use chcekbox in your td then you should use data-checkbox attribute as shown in this link https://examples.bootstrap-table.com/#column-options/checkbox.html#view-source
Fiddle using data-checkbox attribute 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>

赞(0）回复(0）举报 2022-12-07

sauutmhj2#

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

赞(0）回复(0）举报 2022-12-07