此前呢项目需要，故了解了一下如何在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");
}
}
