Java全栈之Tab选项卡的正确使用方法。

当有多个Tab选项卡的时候，如果Java后端一次性传值到前端页面，第一次加载势必会加载很慢，那么就需要分Tab卡片加载数据。

所以我的实现方式是，一个Tab选项卡代表一个页面，然后通过Ajax请求到Java后端返回视图到代表的选项卡页面。回调整个页面到父页面中。

具体实现方法如下：

HTML如下：

 

 1   <div class="portlet-body">
 2 
 3                 <div class="tabbable-line">
 4                     <input type="hidden" th:value="${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>        

View Code

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">18048877597a>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">Emptya>Td>
46             td>
47         tr>
48     table>
49 div>

View Code

因为最后是渲染到母版选项卡页面的，所以只要div嵌入进去就好，其他的js，css无需在页面子页选项卡写，渲染页面时用的是母版选项卡的资源文件。

最后效果如下：

 

 

Java代码为方便浏览，图如下：