bootstrap table 实现行内编辑

夕降巫咸

已于 2024-06-26 16:45:36 修改

阅读量771

点赞数 1

分类专栏：前端文章标签： bootstrap javascript

于 2020-03-02 15:14:09 首次发布

本文链接：https://blog.csdn.net/changeable0127/article/details/104611926

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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

//格式化表格头部内容
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");
	}
}