Easy UI動態添加Tab（標簽頁）

需求：使用easy UI完成tab動態添加

解決：

1.創建Tabs

<div style="margin-bottom:10px">
       <a href="#" class="easyui-linkbutton" onclick="addFactory()">增加工廠</a>
       </div>
<!-- 引入子工廠信息 -->
<div id="facInfo" class="easyui-tabs" style="width:980px;height:250px;margin-top:20px;">
             <!-- 顯示facInfo信息 -->
</div>

2.實現addFactory函數

currentFactoryNum = 1;
    function addFactory() {
        currentFactoryNum ++ ;
        addTab('工廠'+currentFactoryNum,'<%=request.getContextPath()%>/apps/supplierInfo.do?method=facInfo')
    }
/* 動態添加Tab */
    function addTab(title, url){
        if ($('#facInfo').tabs('exists', title)){
            $('#facInfo').tabs('select', title);
        } else {
            var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
            $('#facInfo').tabs('add',{
                title:title,
                content:content,
                border:false,
                fit:true,
                closable:true,
            });
            $('#facInfo').tabs({
                onBeforeClose: function(title){
                     currentFactoryNum--;//關Tab標簽的時候變量自減
                }
            });
        }
    }

3.Controller層的facInfo方法請求facInfo.jsp

@Controller("/apps/supplierInfo")
@RequestMapping("/apps/supplierInfo.do")
public class SupplierInfoController {
....
 /* 獲取子工廠信息*/
        @RequestMapping(params = "method=facInfo")
        public ModelAndView facInfo(HttpServletRequest request, ModelMap modelMap) {
            
            return ModelAndViewUtil.getModelAndView(request,"/apps/supplierinfo/facInfo", modelMap);
        }      
}

4.facInfo.jsp(顯示內容)

<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/inc/init_import.jsp"%>
<%@ taglib uri="http://github.com/jior/glaf/tags" prefix="glaf"%>
<%@ include file="/WEB-INF/views/inc_bootstrap/init_include.jsp"%>
<jsp:include page="/WEB-INF/views/inc_bootstrap/init_html_head.jsp">
    <jsp:param value="1" name="loadCssFlag" />
</jsp:include>
<script type="text/javascript"
    src="<%=request.getContextPath()%>/smart/js/glaf-edit.js"></script>
<section id="widget-grid" class="">
    <div class="row">
        <article class="col-sm-12 col-md-12 col-lg-12">
            <div class="jarviswidget" id="wid-factoryInfo_eidt_0"
                data-widget-editbutton="false" data-widget-custombutton="false"
                data-widget-deletebutton="false" data-widget-togglebutton="false">
                <form id="gzgi_Form" name="gzgi_Form" class="form-horizontal"
                    method="post">
                    <input type="hidden" id="lFactoryId" name="lFactoryId"
                        value="${factoryInfo.lFactoryId}" />
                    <fieldset>
                    <br>
                        <div class="form-group">
                            <label
                                class="hidden-xs col-sm-2 col-md-2 col-lg-2 control-label text-primary"
                                style="white-space: nowrap;"> <glaf:msg
                                    code="app.table.factoryinfo.lfactoryno" text="子工廠編碼" />:
                            </label>
                            <div class="col-xs-9 col-sm-3 col-md-3 col-lg-3">
                                <input id="factoryNoLike" name="factoryNoLike"
                                    class="form-control input-sm" type="text" value="${factoryInfo.lFactoryNo}"
                                    placeholder="<glaf:msg code="app.table.factoryinfo.lfactoryno" text="子工廠編碼" />">
                            </div>
                            <label
                                class="hidden-xs col-sm-2 col-md-2 col-lg-2 control-label text-primary"
                                style="white-space: nowrap;"> <glaf:msg
                                    code="app.table.factoryinfo.sfactoryname" text="子工廠簡稱" />:
                            </label>
                            <div class="col-xs-9 col-sm-3 col-md-3 col-lg-3">
                                <input id="factoryNameLike" name="factoryNameLike"
                                    class="form-control input-sm" type="text" value="${factoryInfo.sFactoryName}"
                                    placeholder="<glaf:msg code="app.table.factoryinfo.sfactoryname" text="子工廠簡稱" />">
                            </div>
                        </div>
                        <div class="form-group">
                            <label
                                class="hidden-xs col-sm-2 col-md-2 col-lg-2 control-label text-primary"
                                style="white-space: nowrap;"> <glaf:msg
                                    code="app.table.factoryinfo.sfactoryfullname" text="子工廠名稱" />:
                            </label>
                            <div class="col-xs-9 col-sm-3 col-md-3 col-lg-3">
                                <input id="factoryFullNameLike" name="factoryFullNameLike"
                                    class="form-control input-sm" type="text" value="${factoryInfo.sFactoryFullName}"
                                    placeholder="<glaf:msg code="app.table.factoryinfo.sfactoryfullname" text="子工廠名稱" />">
                            </div>
                            <label
                                class="hidden-xs col-sm-2 col-md-2 col-lg-2 control-label text-primary"
                                style="white-space: nowrap;"> <glaf:msg
                                    code="app.table.factoryinfo.sfactoryaddress" text="子工廠地址" />:
                            </label>
                            <div class="col-xs-9 col-sm-3 col-md-3 col-lg-3">
                                <input id="factoryAddressLike" name="factoryAddressLike"
                                    class="form-control input-sm" type="text" value="${factoryInfo.sFactoryAddress}"
                                    placeholder="<glaf:msg code="app.table.factoryinfo.sfactoryaddress" text="子工廠地址" />">
                            </div>
                        </div>
                        <div class="form-group">
                            <label
                                class="hidden-xs col-sm-2 col-md-2 col-lg-2 control-label text-primary"
                                style="white-space: nowrap;"> <glaf:msg
                                    code="app.table.factoryinfo.xx" text="子工廠履歷" />:
                            </label>
                            <button type="button" id="Imp_Btn" class="btn btn-info"
                                onclick="javascript:importFun();">
                                <i class="glyphicon glyphicon-import"></i>
                                <glaf:msg code="sys.commom.import" text="上傳新規概況表" />
                            </button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </article>
    </div>
</section>
<jsp:include page="/WEB-INF/views/inc_bootstrap/init_html_end.jsp">
    <jsp:param value="1" name="loadCssFlag" />
</jsp:include>
<%@ include file="/WEB-INF/views/inc_bootstrap/init_end.jsp"%>

5.效果圖

頁面加載如下

單擊“增加工廠”則會動態顯示如下效果