需求：使用easy UI完成tab动态添加
解决：
1.创建Tabs
1 <div style="margin-bottom:10px"> 2 <a href="#" class="easyui-linkbutton" onclick="addFactory()">增加工厂</a> 3 </div> 4 <!-- 引入子工厂信息 --> 5 <div id="facInfo" class="easyui-tabs" style="width:980px;height:250px;margin-top:20px;"> 6 <!-- 显示facInfo信息 --> 7 </div>
2.实现addFactory函数
1 currentFactoryNum = 1; 2 function addFactory() { 3 currentFactoryNum ++ ; 4 addTab('工厂'+currentFactoryNum,'<%=request.getContextPath()%>/apps/supplierInfo.do?method=facInfo') 5 } 6 /* 动态添加Tab */ 7 function addTab(title, url){ 8 if ($('#facInfo').tabs('exists', title)){ 9 $('#facInfo').tabs('select', title); 10 } else { 11 var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'; 12 $('#facInfo').tabs('add',{ 13 title:title, 14 content:content, 15 border:false, 16 fit:true, 17 closable:true, 18 }); 19 $('#facInfo').tabs({ 20 onBeforeClose: function(title){ 21 currentFactoryNum--;//关Tab标签的时候变量自减 22 } 23 }); 24 } 25 }
3.Controller层的facInfo方法请求facInfo.jsp
1 @Controller("/apps/supplierInfo") 2 @RequestMapping("/apps/supplierInfo.do") 3 public class SupplierInfoController { 4 .... 5 /* 获取子工厂信息*/ 6 @RequestMapping(params = "method=facInfo") 7 public ModelAndView facInfo(HttpServletRequest request, ModelMap modelMap) { 8 9 return ModelAndViewUtil.getModelAndView(request,"/apps/supplierinfo/facInfo", modelMap); 10 } 11 }
4.facInfo.jsp(显示内容)
1 <%@ page contentType="text/html;charset=UTF-8"%> 2 <%@ include file="/WEB-INF/views/inc/init_import.jsp"%> 3 <%@ taglib uri="http://github.com/jior/glaf/tags" prefix="glaf"%> 4 <%@ include file="/WEB-INF/views/inc_bootstrap/init_include.jsp"%> 5 <jsp:include page="/WEB-INF/views/inc_bootstrap/init_html_head.jsp"> 6 <jsp:param value="1" name="loadCssFlag" /> 7 </jsp:include> 8 <script type="text/javascript" 9 src="<%=request.getContextPath()%>/smart/js/glaf-edit.js"></script> 10 <section id="widget-grid" class=""> 11 <div class="row"> 12 <article class="col-sm-12 col-md-12 col-lg-12"> 13 <div class="jarviswidget" id="wid-factoryInfo_eidt_0" 14 data-widget-editbutton="false" data-widget-custombutton="false" 15 data-widget-deletebutton="false" data-widget-togglebutton="false"> 16 <form id="gzgi_Form" name="gzgi_Form" class="form-horizontal" 17 method="post"> 18 <input type="hidden" id="lFactoryId" name="lFactoryId" 19 value="${factoryInfo.lFactoryId}" /> 20 <fieldset> 21 <br> 22 <div class="form-group"> 23 <label 24 class="hidden-xs col-sm-2 col-md-2 col-lg-2 control-label text-primary" 25 style="white-space: nowrap;"> <glaf:msg 26 code="app.table.factoryinfo.lfactoryno" text="子工厂编码" />: 27 </label> 28 <div class="col-xs-9 col-sm-3 col-md-3 col-lg-3"> 29 <input id="factoryNoLike" name="factoryNoLike" 30 class="form-control input-sm" type="text" value="${factoryInfo.lFactoryNo}" 31 placeholder="<glaf:msg code="app.table.factoryinfo.lfactoryno" text="子工厂编码" />"> 32 </div> 33 <label 34 class="hidden-xs col-sm-2 col-md-2 col-lg-2 control-label text-primary" 35 style="white-space: nowrap;"> <glaf:msg 36 code="app.table.factoryinfo.sfactoryname" text="子工厂简称" />: 37 </label> 38 <div class="col-xs-9 col-sm-3 col-md-3 col-lg-3"> 39 <input id="factoryNameLike" name="factoryNameLike" 40 class="form-control input-sm" type="text" value="${factoryInfo.sFactoryName}" 41 placeholder="<glaf:msg code="app.table.factoryinfo.sfactoryname" text="子工厂简称" />"> 42 </div> 43 </div> 44 <div class="form-group"> 45 <label 46 class="hidden-xs col-sm-2 col-md-2 col-lg-2 control-label text-primary" 47 style="white-space: nowrap;"> <glaf:msg 48 code="app.table.factoryinfo.sfactoryfullname" text="子工厂名称" />: 49 </label> 50 <div class="col-xs-9 col-sm-3 col-md-3 col-lg-3"> 51 <input id="factoryFullNameLike" name="factoryFullNameLike" 52 class="form-control input-sm" type="text" value="${factoryInfo.sFactoryFullName}" 53 placeholder="<glaf:msg code="app.table.factoryinfo.sfactoryfullname" text="子工厂名称" />"> 54 </div> 55 <label 56 class="hidden-xs col-sm-2 col-md-2 col-lg-2 control-label text-primary" 57 style="white-space: nowrap;"> <glaf:msg 58 code="app.table.factoryinfo.sfactoryaddress" text="子工厂地址" />: 59 </label> 60 <div class="col-xs-9 col-sm-3 col-md-3 col-lg-3"> 61 <input id="factoryAddressLike" name="factoryAddressLike" 62 class="form-control input-sm" type="text" value="${factoryInfo.sFactoryAddress}" 63 placeholder="<glaf:msg code="app.table.factoryinfo.sfactoryaddress" text="子工厂地址" />"> 64 </div> 65 </div> 66 <div class="form-group"> 67 <label 68 class="hidden-xs col-sm-2 col-md-2 col-lg-2 control-label text-primary" 69 style="white-space: nowrap;"> <glaf:msg 70 code="app.table.factoryinfo.xx" text="子工厂履历" />: 71 </label> 72 <button type="button" id="Imp_Btn" class="btn btn-info" 73 onclick="javascript:importFun();"> 74 <i class="glyphicon glyphicon-import"></i> 75 <glaf:msg code="sys.commom.import" text="上传新规概况表" /> 76 </button> 77 </div> 78 </fieldset> 79 </form> 80 </div> 81 </article> 82 </div> 83 </section> 84 <jsp:include page="/WEB-INF/views/inc_bootstrap/init_html_end.jsp"> 85 <jsp:param value="1" name="loadCssFlag" /> 86 </jsp:include> 87 <%@ include file="/WEB-INF/views/inc_bootstrap/init_end.jsp"%>
5.效果图
页面加载如下
单击“增加工厂”则会动态显示如下效果
