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");
	}
}