Java全棧之Tab選項卡的正確使用方法。
阿新 • • 發佈：2020-08-11
當有多個Tab選項卡的時候，如果Java後端一次性傳值到前端頁面，第一次載入勢必會載入很慢，那麼就需要分Tab卡片載入資料。
所以我的實現方式是，一個Tab選項卡代表一個頁面，然後通過Ajax請求到Java後端返回檢視到代表的選項卡頁面。回撥整個頁面到父頁面中。
具體實現方法如下：
HTML如下：
1 <div class="portlet-body"> 2 3 <div class="tabbable-line"> 4 <input type="hidden" th:valueView Code="${index}" id="index"/> 5 <ul class="nav nav-tabs" id="tab"> 6 <li> 7 <a onclick="showTab(this,1)" data-toggle="tab">基本資訊(BasicMation)</a> 8 </li> 9 <li class=""> 10 <a onclick="showTab(this,2)" data-toggle="tab">來往記錄(Record)</a> 11 </li> 12 <li class=""> 13 <a onclick="showTab(this,3)" data-toggle="tab">客戶反饋(CoupleBack)</a> 14 </li> 15 <li class=""> 16 <a onclick="showTab(this,4)" data-toggle="tab">聯絡人(Contacts)</a> 17 </li> 18 <li> 19 <a href="#tab_1_2" data-toggle="tab">財務資料(Financial)</a> 20 </li> 21 <li> 22 <a href="#tab_1_3" data-toggle="tab">物流資料(Logistics)</a> 23 </li> 24 25 <li> 26 <a href="#tab_1_8" data-toggle="tab">資質要求(Require)</a> 27 </li> 28 <li> 29 <a href="#tab_1_12" data-toggle="tab">提醒記錄(Remind)</a> 30 </li> 31 </ul> 32 <div class="tab-content" id="content"> 33 //此處為子頁面回撥渲染的地方 34 </div> 35 </div> 36 37 </div>
JS程式碼如下：
1 function showTab(obj,index){ 2 var currentIndex = $("#index").val(); 3 $("#tab").children().eq(currentIndex-1).removeClass("active"); 4 $("#tab").children().eq(index-1).addClass("active"); 5 $("#index").val(index); 6 //基本資料 7 if(index==1){ 8 $.get("/client/basic",function (result) { 9 $("#content").html(""); 10 $("#content").html(result); 11 }) 12 } 13 //來訪記錄 14 else if(index==2){ 15 $.get("/client/records",function (result) { 16 $("#content").html(""); 17 $("#content").html(result); 18 }) 19 } 20 //客戶反饋 21 else if(index ==3){ 22 $.get("/client/feedback",function (result) { 23 $("#content").html(""); 24 $("#content").html(result); 25 }) 26 } 27 //聯絡人資訊 28 else if(index == 4){ 29 $.get("/client/contacts",function (result) { 30 $("#content").html(""); 31 $("#content").html(result); 32 }) 33 } 34 }View Code
Java程式碼如下（此處不一一寫完，點到為止。）：
1 //基本資訊 2 @RequestMapping(value = "/basic", method = RequestMethod.GET) 3 public String basic(ModelMap modelMap) { 4 modelMap.addAttribute("test", "fdskodsfnfisnfoibs"); 5 return "appmember/basicInformation"; 6 } 7 //來往記錄 8 @RequestMapping(value = "/records", method = RequestMethod.GET) 9 public String records(ModelMap modelMap) { 10 modelMap.addAttribute("test", "是你發咯吧"); 11 return "appmember/records"; 12 } 13 //反饋的資訊 14 @RequestMapping(value = "/feedback", method = RequestMethod.GET) 15 public String feedback(ModelMap modelMap) { 16 modelMap.addAttribute("test", "是你發咯吧"); 17 return "appmember/feedback"; 18 }View Code
Java中檢視指向地址為面板的子頁面，舉例如下：
1 <div class="tab-pane active" id="tab_1_1"> 2 <div class="alert alert-danger"> 3 <strong>此客戶對廠商或者產品有資質要求</strong> 4 </div> 5 <table class="table table-striped"> 6 <tr> 7 <Td>客戶名稱(ClientName)：<a class="editable editable-click" th:text="${test}">武漢成錦源科貿有限公司</a></Td> 8 <Td>客戶簡稱(ClientAnotherNamer)：<a class="editable editable-click">武漢成錦源</a></Td> 9 <Td>手機號碼(Phone)：<a class="editable editable-click">18048877597</a></Td> 10 <Td>主聯絡人(Contacts)：<a class="editable editable-click">王定華</a></Td> 11 </tr> 12 <tr> 13 <Td>客戶類別(ClientType)：<a class="editable editable-click">經銷商</a></Td> 14 <Td>客戶等級(ClientClass)：<a class="editable editable-click">D+</a></Td> 15 <Td>客戶行業(ClientIndustry)：<a class="editable editable-click">資訊網路</a></Td> 16 <Td>客戶性質(ClientNature)：<a class="editable editable-click">國內客戶</a></Td> 17 </tr> 18 <tr> 19 20 <Td>大州(State)：<a class="editable editable-click">中國</a></Td> 21 <Td>地區(Region)：<a class="editable editable-click">華南</a></Td> 22 <Td>國家(Nation)：<a class="editable editable-click">中國</a></Td> 23 <Td>省份&城市(Province)：<a class="editable editable-click">廣東-深圳</a></Td> 24 </tr> 25 <tr> 26 <Td>公司主頁(CorporationPage)：<a class="editable editable-click"></a></Td> 27 <Td>郵政編碼(MailCoding)：<a class="editable editable-click"></a></Td> 28 <Td>關聯公司(RelevanceCorporation )：<a class="editable editable-click"></a></Td> 29 <Td>和關聯公司關係(CorporationRelation)：<a class="editable editable-click"></a></Td> 30 </tr> 31 <tr> 32 <Td>經營範圍(ManageScope)：<a class="editable editable-click"></a></Td> 33 <Td>客戶行業(ClientIndustry)：<a class="editable editable-click"></a></Td> 34 <Td>客戶類別(ClientType)：<a class="editable editable-click">整合整合</a></Td> 35 <Td>電源及插頭種類(PowerType)：<a class="editable editable-click"></a></Td> 36 </tr> 37 <tr> 38 <Td>需求量(QuantityDemanded)：<a class="editable editable-click">多</a></Td> 39 <Td>需求頻率(Requency)：<a class="editable editable-click">一般</a></Td> 40 <Td>客戶當地時間(CurrentTime)：<a class="editable editable-click"></a></Td> 41 <Td><a class="editable editable-click"></a></Td> 42 </tr> 43 <tr> 44 <td colspan="4"> 45 備註(Remark)：<a class="editable editable-click">Empty</a></Td> 46 </td> 47 </tr> 48 </table> 49 </div>View Code
因為最後是渲染到母版選項卡頁面的，所以只要div嵌入進去就好，其他的js，css無需在頁面子頁選項卡寫，渲染頁面時用的是母版選項卡的資原始檔。
最後效果如下：
Java程式碼為方便瀏覽，圖如下：