此前呢项目需要，故了解了一下如何在bootstrap table中每行添加一个按钮，对行内元素执行编辑、删除等操作。
HTML
<table class="table table-bordered">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
JS
//格式化表格头部内容
var arrHead = [{
field: 'A',
title: 'A',
sortable: "true",
},
{
field: 'B',
title: 'B',
sortable: "true",
},
//此部分为自定义部分
{
field: 'operate',
title: '操作',
align: 'center',
events: "operateEvents",
formatter: operateFormatter
}
];
//return 里可以有多个返回内容 根据样式如（.RoleOfA）来定义不同按钮的操作
function operateFormatter(value, row, index) {
return [ '<button type="button" class="RoleOfA btn btn-primary btn-sm" style="margin-right:15px;">显示详情</button>'].join('');
}
window.operateEvents = {
'click .RoleOfA': function(e, value, row, index) {
//此处为需要操作的具体方法实现
}
};
function UpdateBoxesTable(data) {
for( var i = 0; i < data.Boxes.length; i++ ) {
var $trTemp = $("<tr></tr>");
$trTemp.append("<td>"+ data.xxx +"</td>");
$trTemp.append("<td>"+ data.xxx +"</td>");
$trTemp.append("<td>"+ data.xxx +"</td>");
$trTemp.append("<td>"+ data.xxx +"</td>");
$trTemp.appendTo("#tbody");
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
