当有多个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代码为方便浏览，图如下：
登录查看全部
参与评论
手机查看
返回顶部
