如何动态增加删除tab页

function addTabs(Main,contentName,className,html,tabName) {

    var str//  className(自定义命名名字)+后缀数字

    var val//  获取class类名的值

    var mainLi =$("#"+Main)

    //取ul下li的个数，即tab的个数

    var length = mainLi.children().length

    //maxTab 为全局变量，默认值为 1，即首页。增加页采取的策略  是 不断递增，即使删除，尾号也会增加

    maxTab =maxTab +1

    str =  className+(maxTab).toString()

    val =$('.'+str).val()

    //创建li

    var li =document.createElement("li")

    li.setAttribute("class",str)

    //创建a

    var a =document.createElement('a')

    a.setAttribute("class",str)

    a.setAttribute("href","#"+str)

    a.setAttribute("data-toggle","tab")

    a.setAttribute('display',"inline")

    //创建div

    var Adiv =document.createElement('div')

    //创建span

    var span =document.createElement('span')

    span.setAttribute("id",str+"Text")

    span.setAttribute("float","left")

    span.setAttribute("display","inline")

    //创建button

    var btn =document.createElement('button')

    btn.setAttribute("type","button")

    btn.setAttribute("class","close")

    //为button定义一个方法  参数为str

    var close ="closeAddTab(" +str +")"

    btn.setAttribute("onclick",close)

    btn.setAttribute("aria-hidden","true")

    btn.setAttribute("aria-hidden","true")

    btn.setAttribute("display","inline")

    //定义一个btn里的span

    var btnSpan =document.createElement('span')

    btnSpan.setAttribute("id",str+"Span")

    btnSpan.setAttribute("display","inline")

    //追加

    btn.appendChild(btnSpan)

    Adiv.appendChild(span)

    Adiv.appendChild(btn)

    a.appendChild(Adiv)

    li.appendChild(a)

    mainLi[0].appendChild(li)

    //设置tab名字

    $("#"+str+"Text").text(tabName)

    $("#"+str+"Span").html("×")

    //生成 内容页

    var mainDiv =$("#"+contentName)

    //创建 子tab内容页

    var div =document.createElement('div')

    div.setAttribute("class","tab-pane fade")

    div.setAttribute("id",str)

    //内容页

    var div2 =document.createElement('div')

    div2.setAttribute("id",str+"Son")

    //追加

    div.appendChild(div2)

    mainDiv[0].appendChild(div)

    //设置 内容的html

    $("#"+str+"Son").html(html)

    $('.'+str).css("float","left")

    //显示最后一个，即新打开的页面

    $('#'+Main+" a:last").tab('show')

}

function closeAddTab(Main,str,className) {

//str 来自addtabs创建，会带入一个select,获取它的名字

    str = str.id.toString().trim()

    var lastNum

    var str2 = str

    //获取 className的长度

    var len =Number(str.substring(className.length))

    var tab

    var val

    var last =$('#'+Main+' a:last')[0].getAttribute("class").trim()

    lastNum = last.toString().substring(className.length)

    lastNum =Number(lastNum)

    //获取 tab页尾号

    if (len === lastNum) {

for (let i = len -1i >0i--) {

val ='.' + className + i.toString()

            val =$(val).val()

            if (val !==undefined) {

str ="#"+className + i.toString()

                tab ='#'+Main+' a[href="' + str +'"]'

break

            }

}

}

var length =$("#"+Main).children().length

    var str3 ="."+str2

    var str4 ="#"+str2

    //移出

    $(str3).remove()

    $(str4).remove()

    //如果只有2个页面，则会到首页，多个则会到前面的一个

    if (length ===2){

$('#'+Main+' a:first').tab('show')

}else {

$(tab).tab('show')

    }

}

// 获取当前 active 的tab页

function getTabNum() {

var tabNum

    if (maxTab ===2){

tabNum =maxTab

    }else {

var active =$('.active').children()[0].getAttribute('class')

        tabNum = active.toString().substring(className.length)

    }

return tabNum

}

 /**

  * 增加标签页

  */

 function addTab(options) {

     //option:

     //tabMainName:tab标签页所在的容器

     //tabName:当前tab的名称

     //tabTitle:当前tab的标题

     //tabUrl:当前tab所指向的URL地址

     var exists = checkTabIsExists(options.tabMainName, options.tabName)

     if(exists){

         $("#tab_a_"+options.tabName).click()

     } else {

         $("#"+options.tabMainName).append('<li id="tab_li_'+options.tabName+'"><a href="#tab_content_'+options.tabName+'" data-toggle="tab" id="tab_a_'+options.tabName+'"><button class="close closeTab" type="button" onclick="closeTab(this)">×</button>'+options.tabTitle+'</a></li>')

         

         //固定TAB中IFRAME高度

         mainHeight = $(document.body).height() - 5

         

         var content = ''

         if(options.content){

             content = option.content

         } else {

             content = '<iframe src="' + options.tabUrl + '" width="100%" height="'+mainHeight+'px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>'

         }

         $("#"+options.tabContentMainName).append('<div id="tab_content_'+options.tabName+'" role="tabpanel" class="tab-pane" id="'+options.tabName+'">'+content+'</div>')

         $("#tab_a_"+options.tabName).click()

     }

 }

 

 

 /**

  * 关闭标签页

  * @param button

  */

 function closeTab (button) {

     

     //通过该button找到对应li标签的id

     var li_id = $(button).parent().parent().attr('id')

     var id = li_id.replace("tab_li_","")

     

     //如果关闭的是当前激活的TAB，激活他的前一个TAB

     if ($("li.active").attr('id') == li_id) {

         $("li.active").prev().find("a").click()

     }

     

     //关闭TAB

     $("#" + li_id).remove()

     $("#tab_content_" + id).remove()

 }

 

 /**

  * 判断是否存在指定的标签页

  * @param tabMainName

  * @param tabName

  * @returns {Boolean}

  */

 function checkTabIsExists(tabMainName, tabName){

     var tab = $("#"+tabMainName+" > #tab_li_"+tabName)

     //console.log(tab.length)

     return tab.length > 0

 }

要先初始化tabs后才能调用add方法，使用样式来初始化easyUI需要在dom

ready前将html代码添加到dom中，要不也无法初始化

var

tab

=

$("<div

id='tab_row_"

+

r

+

"_column_"

+

c

+

"'

class='easyui-tabs'

style='width:500pxheight:250px'>")

$('#xxxx').append(tab)

tab.tab()//要手动调用tabs进行初始化

var

content

=

"<table

id='table_datagrid_'"

+

view.id

+"></table>"

tab.tabs('add',

{

title:

view.title,

content

:

content,

closable:

true

})

---