动态添加tabs
<a type="button" id="mybutton" class="easyui-linkbutton">添加选项卡</a>
<script type="text/javascript">
$(function(){
//页面加载完成后,为上面的按钮绑定单击事件
$("#mybutton").click(function(){
//判断当前选项卡是否存在
var e = $("#mytabs").tabs("exists","测试面板");
if(e){
//已经存在了,只需要选中
$("#mytabs").tabs("select","测试面板");
}else{
//调用easyUI提供的tabs对象的add方法,动态添加一个选项卡面板
$("#mytabs").tabs("add",{
title:'测试面板',
content:'11111',
closable:true
});
}
});
});
</script>
基于ajax加载远程json数据构造ztree
<ul id="myztree" class="ztree"></ul>
<script type="text/javascript">
$(function(){
$.post('../data/menu.json',function(data){
//定义一个变量,设置ztree的相关属性
var setting3 = {
data: {
simpleData: {
enable: true//启用简单格式的json数据
}
}
};
//调用init初始化方法创建ztree
$.fn.zTree.init($("#myztree"), setting, data);
},'json');
});
</script>
为ztree节点绑定事件动态添加选项卡
<!-- 发送ajax请求获取json数据,构造ztree -->
<ul id="myztree3" class="ztree"></ul>
<script type="text/javascript">
$(function(){
$.post('../data/menu.json',function(data){
//定义一个变量,设置ztree的相关属性
var setting3 = {
data: {
simpleData: {
enable: true//启用简单格式的json数据
}
},
callback: {
//绑定单击事件
onClick: function(event, treeId, treeNode){
if(treeNode.page != undefined){
var e = $("#mytabs").tabs("exists",treeNode.name);
if(e){
//已经存在了,只需要选中
$("#mytabs").tabs("select",treeNode.name);
}else{
//需要打开选项卡面板
//调用easyUI提供的tabs对象的add方法,动态添加一个选项卡面板
$("#mytabs").tabs("add",{
title:treeNode.name,
content:'<iframe width="100%" height="100%" style="border: 0" src="../'+treeNode.page+'"></iframe>',
closable:true
});
}
}
}
}
};
//调用init初始化方法创建ztree
$.fn.zTree.init($("#myztree3"), setting3, data);
},'json');
});
</script>