Bootstrap-table给单元格添加功能按钮和事件

写在前面：网上有很多说能解决文章标题的问题之帖子，但都是大同小异，而且按照其法会报错。因此我在我的JavaScript代码的基础上研究了一下，终于有了解决方法，简单易操作且易学。

我先改造前的代码：

1、前端表格

主要看 <table 那一段表格的代码

<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">部门信息列表</div>
					<!-- /.panel-heading -->
					<table  
						id="maintable"
						data-toggle="table"
						data-id-field="depa_id"
						data-locale="zh-CN"
						class="table table-bordered table-striped table-hover">
						<thead>
							<tr>
								<th data-field="depa_count">序号</th>
								<th data-field="depa_id">部门ID</th>
								<th data-field="depa_title">部门名称</th>
								<th data-field="depa_remark">职责描述</th>
								<th data-field="depa_enable">状态</th>
								<th data-field="depa_operation">操作</th>
							</tr>
						</thead>
					</table>
					<div class="col-md-12 text-right" id="pageDiv">
					</div>
					<!-- /.panel-body -->
				</div>
				<!-- /.panel -->
			</div>
			<!-- /.col-lg-12 -->
		</div>
	</div>

JavaScript

<script >

window.onload=function(){
    var url="getdepartments";	
    $.post(
		url, 
		function(data) { 
			console.log(data); // 在控制台上展示后台传来的Json字符串“data”
			var objects = $.parseJSON(data);	// 解析上面的字符串“data”为对象结构
			console.log(objects);	// 在控制台上展示转成对象结构后的“data”
			
		    var rows = [];	// 初始化主数据的行
			var list = objects.page.rows; // 主数据清单
			console.log("数据清单：" + list);	// 在控制台上展示主数据清单内容：一般为[Object,Object]这样的键值对序列
			var i = 1;
			
			var $table = $('#maintable'); // 初始化页面上的主数据清单表格
        	$.each(list, function(index,item){ // 将主数据逐行显示在页面的表格中
        		rows.push({
        			depa_count: i++,
        			depa_id: item.depa_id,
        			depa_title: item.depa_title,
        			depa_remark: item.depa_remark,
        			depa_enable: item.depa_enable,
        			depa_operation: "<a href='#' class='btn btn-default btn-xs' data-toggle='modal' data-target='#departmentEditDialog' οnclick='showMainData(" + item.depa_id + ")'>查看</a>" + 
        							"<a href='#' class='btn btn-primary btn-xs' data-toggle='modal' data-target='#departmentEditDialog' οnclick='updateMainData(" + item.depa_id + ")'>修改</a>" + 
        							"<a href='#' class='btn btn-danger btn-xs' data-toggle='modal' data-target='#departmentEditDialog' οnclick='deleteMainData(" + item.depa_id + ")'>删除</a>"
				});
    		});
        	$table.bootstrapTable('load', rows);
        	$table.bootstrapTable('hideColumn', 'depa_id');
     }); 
    $("#loading").hide();
}
</script>

主要看 depa_operation: 如何写入按钮。
之于按钮的点击出发时间，就想一般的在JavaScript中分别写出showMainData(id)、updateMainData(id)、deleteMainData(id) 三个方法即可。