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