![](/img/trans.png)
[英]onClick table row with onClick Button and Bootstrap Modal inside
[英]How to pass row id into a functon onclick button, bootstrap table
我正在使用引导程序 4 并尝试使用删除/编辑按钮构建引导程序表。 我使用 ajax 将数据加载到表中。 我的问题是,当我单击删除或编辑按钮时,它不会将行 ID(row.id)传递给 function。 我用警报测试了它并显示“未定义”。 我以前用于另一个引导表的相同代码,它工作正常。 我在这里看不到任何错误,但它不起作用。 我期待您的帮助。
HTML:
<table class="table table-striped table-hover" id="expenseTable"
data-search="true"
data-pagination="true">
<thead class="table-light">
<tr>
<th scope="col" data-feild="id" data-sortable="true">Id</th>
<th scope="col" data-feild="user" data-sortable="true">User</th>
<th scope="col" data-feild="category" data-sortable="true">Category</th>
<th scope="col" data-feild="source" data-sortable="true">Source</th>
<th scope="col" data-feild="description" data-sortable="true">Description</th>
<th scope="col" data-feild="amount" data-sortable="true">Amount</th>
<th scope="col" data-feild="date" data-sortable="true">Date</th>
<th>Action</th>
</tr>
</thead>
<tbody id="expenseTblBdy">
</tbody>
</table>
JavaScript:
$(document).ready(function() {
load();
function loadExpenseData(data){
$(function() {
$('#expenseTable').bootstrapTable({
data: data,
columns: [ {},{},{},{},{},{},{},
{
field: 'operate',
title: 'Action',
align: 'center',
valign: 'middle',
clickToSelect: false,
formatter : function(value,row,index) {
return '<button class=\'btn btn-primary btn-sm btnExp-up\' pageName="'+row.id+'" pageDetails="'+row.user+'">Update</button> <button class=\'btn btn-danger btn-sm btnExp-del\' pageName="'+row.id+'">Dalete</button>';
}
}
]
});
$(".btnExp-up").click(function(e){
var expId = $(this).attr('pageName');
alert(expId);
//modifyExp(expId);
// $("#mdlOutsideUpdate").modal("show");
e.stopPropagation();
});
$(".btnExp-del").click(function(e){
var expId = $(this).attr('pageName');
removeExp(expId);
e.stopPropagation();
});
});
}
});
加载 function 所做的是使用 ajax 将数据加载到表中,它工作正常。
尝试将pageName
和pageDetails
转换为data-*
属性。 返回 function 看起来像
return
`
<button class="btn btn-primary btn-sm btnExp-up" data-pageName="${row.id}" data-pageDetails="${row.user}>
Update
</button>
<button class="btn btn-danger btn-sm btnExp-del" data-pageName="${row.id}">
Delete
</button>
`;
然后在按钮单击事件中,您可以访问数据值,例如
var expId = $(this).data('pageName');
注意:我没有尝试过,但我希望它有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.