BootStrap table表格数据联动

需求点：页面刚加载出来时，主表数据随之加载出来，附表仅显示表结构，当点击主表指定行时，附表加载与之关联的数据，附表数据随主表选择行的不同而随之改变：

先来看页面初始加载效果：

 点击某一行后，附表加载对应的数据：

以下是实现的代码：

前端：

<div class="col-sm-12 select-table table-striped">
   <!-- 主表，页面加载时即加载数据-->
	<table id="bootstrap-table"></table>
	<!--附表，方案表，点击主表对应的行才加载数据，放在此处才不会产生太大的行间距-->
	<!--如果另起div装附表，将会在主附表之间造成较大的间距，造成不好的体验-->
	<table id="subTab" class="table">   
		<thead>
			<tr style='height: 15px;' >
				<th>方案编码</th>
				<th>方案名称</th>
				<th>方案描述</th>
				<th>预计工时(小时)</th>
				<th>可用</th>
			</tr>
		</thead>
	</table>
</div>

JS：

//单击行变色并根据故障现象加载解决方案
$('#bootstrap-table').on('click-row.bs.table', function (e,row,$element) {
	$('.changeColor').removeClass('changeColor');
	$($element).addClass('changeColor');
	initTable(row.id);
});

 initTable方法详见我另一篇博客https://blog.csdn.net/shenxiaomo1688/article/details/104556191

 CSS:

.changeColor{
            background-color: #31b0d5  !important;
            color: white;
        }