使用 jquery 获取 bootstrap 中所选 table 行的值

Question

我正在使用 bootstrap table。因为我想在单击同一页面上的 'Add to cart' 按钮后获得所选 table 行的 Item ID value/values。

Table代码：

<table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="tables/data2.json"  data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc" data-single-select="false" data-click-to-select="true" data-maintain-selected="true">
  <thead>
    <tr>
      <th data-field="state" data-checkbox="true"></th>
      <th data-field="id" >Item ID</th>
      <th data-field="name" data-sortable="true">Product Name</th>
      <th data-field="price" data-sortable="true">Actual Price</th>
      <th data-field="discount_price" data-sortable="true">Discount Price</th>
      <th data-field="stock_avail" data-sortable="true">Stock Available</th>
    </tr>
  </thead>
</table>

JQuery代码：

$(document).ready(function()
{
   $("#add_cart").click(function()
   {
      //foreach selected row retrieve 'Item ID' values in array;
      //call ajax for otherpage.php?arr='Item ID array';
   });
});

因为我是 bootstrap 的新人，所以我正在尝试解决这个问题，但没有找到合适的解决方案，有人请告诉我这个。

Answer 1

这是给你的例子：

HTML

<table id="table-style">
<thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id">Item ID</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>5</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>15</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>10</td>
    </tr>
</thead>
</table>

<button>Add to cart</button>

JS

var arr;
$('button').click(function(){
  arr = $('#table-style').find('[type="checkbox"]:checked').map(function(){
      return $(this).closest('tr').find('td:nth-child(2)').text();
  }).get();

  console.log(arr);
});

DEMO

Answer 2

只需使用 check.bs.table 和 uncheck.bs.table 事件来收集您选中的行。

BS-Table Basic Events

这是一个例子：

var checkedRows = [];

$('#eventsTable').on('check.bs.table', function (e, row) {
  checkedRows.push({id: row.id, name: row.name, forks: row.forks});
  console.log(checkedRows);
});

$('#eventsTable').on('uncheck.bs.table', function (e, row) {
  $.each(checkedRows, function(index, value) {
    if (value.id === row.id) {
      checkedRows.splice(index,1);
    }
  });
  console.log(checkedRows);
});

$("#add_cart").click(function() {
  $("#output").empty();
  $.each(checkedRows, function(index, value) {
    $('#output').append($('<li></li>').text(value.id + " | " + value.name + " | " + value.forks));
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>

<table id="eventsTable"
       data-toggle="table"
       data-height="300"
       data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
       data-pagination="true"
       data-search="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-toolbar="#toolbar">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>

<button id="add_cart">Add to card</button>
<ul id="output"></ul>

Answer 3

Bootstrap table 有一个函数 getSelections

使用 javascript 函数，您可以获得所有选定的行。（您的 checkobx 字段应绑定到数据字段="state"）

            function getIdSelections() {
            return $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.Id
            });
        }

Answer 4

要获取选定（选中）的行，请使用 getSelections 方法。

请注意，如果您使用分页，则必须使用 maintainMetaData table 选项。

这是一个示例，当用户单击 显示所选行 按钮时显示所选产品的名称：

var $table = $('#myTable');

function getRowSelections() {
  return $.map($table.bootstrapTable('getSelections'), function(row) {
    return row;
  })
}

$('#showSelectedRows').click(function() {
  var selectedRows = getRowSelections();
  var selectedItems = '\n';
  $.each(selectedRows, function(index, value) {
    selectedItems += value.name + '\n';
  });

  alert('The following products are selected: ' + selectedItems);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

<div id="toolbar">
  <button id="showSelectedRows" class="btn btn-primary" type="button">Show Selected Rows</button>
</div>

<table id="myTable" data-toolbar="#toolbar" data-toggle="table" data-maintain-meta-data="true">
  <thead>
    <tr>
      <th data-field="state" data-checkbox="true"></th>
      <th data-field="id">Item ID</th>
      <th data-field="name" data-sortable="true">Product Name</th>
      <th data-field="price" data-sortable="true">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>1</td>
      <td>Chair</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>2</td>
      <td>Sofa</td>
      <td>0</td>
    </tr>
    <tr>
      <td></td>
      <td>3</td>
      <td>Desk</td>
      <td>0</td>
    </tr>
    <tr>
      <td></td>
      <td>4</td>
      <td>Rug</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

使用 jquery 获取 bootstrap 中所选 table 行的值

Getting values of selected table rows in bootstrap using jquery

javascript

jquery

twitter-bootstrap

bootstrap-table