首先是ztree:
var setting = {
view:{
showLine:true
},
data :{
key:{
name:"name"
},
simpleData:{
enable:true,
idKey:"id",
pIdKey:"pid"
},
},
callback: {
onClick:addTabs
},
};
var currentSelectedNode;
var zNodes;
$.ajax({
url:'${ctx}/admin/tree',
type:'POST',
data:{},
async:false,
success:function(r){
zNodes=eval(r);
}
})
$(document).ready(function(){
$.fn.zTree.init($("#ztreeClass"),setting,zNodes)
});
然后是ztree添加tags
function addTabs(event,treeId,treeNode,clickFlag){ //treeNode代表节点数据,可参照ztree中的api
if(treeNode.click==false){ //click为false不可以进行点击
return ;
}
//在tabs选项卡添加一个新的选项卡
if($('#mytabs').tabs('exists',treeNode.name)){ //treeNode.name对应数据zNodes中的name
//如果存在选项卡,切换到该选项卡中
$('#mytabs').tabs('select',treeNode.name);
}else{
//如果不存在选项卡,添加新的选项卡
$('#mytabs').tabs('add',{
title : treeNode.name,
content : '<div style="width:100%;height:100%;overflow:hidden;">'
+ '<iframe name="c" src="'
+ treeNode.url
+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>', // 可以局部刷新tab选项卡
closable : true //提供关闭选项卡的按钮
});
}
} // 单击ztree的响应函数
然后是普通添加tags
function addTabs1(title,url){
if($('#mytabs').tabs('exists',title)){ //treeNode.name对应数据zNodes中的name
//如果存在选项卡,切换到该选项卡中
$('#mytabs').tabs('select',title);
}else{
//如果不存在选项卡,添加新的选项卡
$('#mytabs').tabs('add',{
title : title,
content : '<div style="width:100%;height:100%;overflow:hidden;">'
+ '<iframe name="c" src="'
+ url
+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>', // 可以局部刷新tab选项卡
closable : true //提供关闭选项卡的按钮
});
}
}
然后是jsp代码
<div data-options="region:'center',title:'欢迎'" style="overflow: hidden;">
<div id="mytabs" class="easyui-tabs" data-options="fit:true">
</div>
</div>