使用 jquery 在引导程序中获取选定表行的值
Posted
技术标签:
【中文标题】使用 jquery 在引导程序中获取选定表行的值【英文标题】:Getting values of selected table rows in bootstrap using jquery 【发布时间】:2015-11-15 01:51:56 【问题描述】:我正在使用引导表。我想在单击同一页面上的'Add to cart'
按钮后获取所选表行的Item ID
值/值。
表格代码:
<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';
);
);
由于我是引导程序的新手,我正在尝试解决这个问题,但没有得到适当的解决方案,请任何人告诉我这个。
【问题讨论】:
tr td
数据是什么样的?
@NorlihazmeyGhazali-请查看我编辑的问题。
Opss 抱歉,再一次,你能确定表格行的 html 结构吗,想看看 HTML 是如何呈现的。几行就够了
@NorlihazmeyGhazali- 我使用引导表插件作为表。
【参考方案1】:
只需使用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-
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>
【讨论】:
太棒了,完美。 您好,是否可以将此代码(仅显示选定项目)设置为使用普通表(数据源来自 html,而不是来自 JSON)?抱歉,我不懂JS。感谢您的帮助。 @Tudor 如果数据是静态 HTML 或来自 JSON,应该没有任何区别。你试过了吗? 是的。我的问题是我无法从 JS 中为这个狙击做到这一点:link。你能帮忙吗? 答案中的链接 (bootstrap-table.com/examples/#events) 不再起作用。【参考方案2】:要获取选中(选中)的行,请使用getSelections 方法。
请注意,如果您使用分页,则必须使用maintainMetaData 表格选项。
这是一个示例,当用户单击 Show Selected Rows 按钮时显示所选产品的名称:
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>$80</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>Sofa</td>
<td>$500</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>Desk</td>
<td>$300</td>
</tr>
<tr>
<td></td>
<td>4</td>
<td>Rug</td>
<td>$200</td>
</tr>
</tbody>
</table>
【讨论】:
这对我来说是一个更清洁的解决方案,而且效果很好 很棒的解决方案,它很干净并且使用自己的引导表方法,效果很好!【参考方案3】:这是给你的例子:
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
【讨论】:
对不起,您的解决方案不适合我,该表从 data-url="tables/data2.json" 获取数据,并且复选框由引导程序自动获取。那么如果特别检查,我怎样才能得到项目 ID 值呢? 你已经尝试了吗?数据来自何处以及 DOM 如何将您的数据呈现到页面中的方式并不重要。检查表上的元素,然后复制它的结构,然后将其粘贴到此处以获得更具体的解决方案 是的,我只用这个 @Vg。请参阅 DavidDomain 的答案。这些插件有自己的事件函数。 感谢您的努力,DavidDomain 的回答是正确的。【参考方案4】:Bootstrap 表有一个函数 getSelections
使用 javascript 函数,您可以获得所有选定的行。 (你的 checkobx 字段应该绑定到 data-field="state")
function getIdSelections()
return $.map($table.bootstrapTable('getSelections'), function (row)
return row.Id
);
【讨论】:
以上是关于使用 jquery 在引导程序中获取选定表行的值的主要内容,如果未能解决你的问题,请参考以下文章