easyui 动态加载tab

easyui框架动态加载tabs

闲话不多说，直接奔入主题。

jsp页面 需要加一个tab的id:

 <div id="texttabs" class="easyui-tabs" style="width:100%;height:100%;"> </div>

js:

function testTabs(){

//3个tabs的路径

urls = [ basePath + 'test1.action',//测试tabs1

           basePath + 'test2.action'//测试tabs2

  basePath + 'test3.action'//测试tabs3

];

$('#texttabs').tabs('add', {
title : '测试tabs1',
content : "",
closable : false
});


$('#texttabs').tabs('add', {
title : '测试tabs2',
content : "",
closable : false


});


$('#texttabs').tabs('add', {
title : '测试tabs3',
content : "",
closable : false

});

$('#texttabs').tabs(
{
border : false,
fit : true,
onSelect : function(title, index) {
var url = urls[index];
var content = '<iframe id="apList" src=" '+ url+ '"  width="100%" height="99%" frameborder="0"  ></iframe>';
var activeTab = $('#texttabs').tabs('getTab',index);
$('#texttabs').tabs('update', {
tab : activeTab,
options : {
content : content
}
});
}
});


// 默认选择第一个tab
$('#texttabs').tabs('select', 0);

}

这个方法如果多次调用testTabs()方法，会无限增加testTabs()中的3个tabs,所有如何需要多次反复调用，需要在再次调用testTabs()之前删除之前的tabs

js代码如下： for(var i=$('#texttabs').tabs('tabs').length-1;i>=0;i--) {
            $("#texttabs").tabs('close', i);
           }

备注：这样的动态tabs固然是不错，但是需要需要同时修改动态tabs 这样做还是无法实现，切换tabs 如果数据没有保存到数据库中，再次切换回之前的数据tabs  ,之前tabs修改的数据无法保存