bootstrap table 实现行内编辑

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