jQuery EasyUI Tab 选项卡问题小结


Posted in Javascript onAugust 16, 2016

需要解决的问题:

jQuery EasyUI Tab 选项卡问题小结

比如说 我先把行政区域的页面打开之后,我又把产品类型管理的页面打开,之后我再产品类型管理里添加了一条数据,当我点击横着的行政区域选项卡时,我需要使用到产品类型管理岗添加的数据,但是在行政区域里不存在那条数据。我就想让这条数据显示出来,所以我就想当我点击横着的选项卡的时候,我就想让刷新一下页面。这时那条数据就会显示出来。

主要是我完全不知道我点击横着的选项卡触发的事件。代码如下:

html

选项卡

<div data-options="region:'center',collapsible:false">
<div id="mainTabs" class="easyui-tabs" data-options="fit:true,narrow:true">
<div title="首页" style="overflow:hidden;" data-options="iconCls:'fa fa-home'">
<div id="myclock" style="margin: 0 auto;width: 400px;" class="clock"></div> 
</div>
</div> 
</div>

js

添加横着的选项卡

function addTab(title, url) {
if ($('#mainTabs').tabs('exists', title)) {
$('#mainTabs').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+ url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs('add', {
title: title, 
content: content, 
closable: true ,
cache:true, 
}); 
}
}

点击左边选项卡

function clickTree(node) {
if ($(this).tree('isLeaf', node.target)) {
addTab(node.text, node.attributes.url); 
} else {
$(this).tree('toggle', node.target);
}
}

问题算是解决了吧!

思路:主要就是点击横着的选项卡的时候,重新加载数据一样。

function addTab(title, url) {
if ($('#mainTabs').tabs('exists', title)) {
$('#mainTabs').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+ url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs('add', {
title: title, 
content: content, 
closable: true ,
cache:true, 
}); 
}
}
function clickTree(node) {
if ($(this).tree('isLeaf', node.target)) {
addTab(node.text, node.attributes.url); 
/* 获取横向的选项卡 */
var content = '<iframe scrolling="auto" frameborder="0" src="'+ node.attributes.url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs({
onSelect: function (title) {
var currTab = $('#mainTabs').tabs('getTab', title, node.attributes.url); 
var iframe = $(currTab.panel('options').content);
var src =iframe.attr('src'); 
$('#mainTabs').tabs('update',{ 
options: {
title: title,
href: src
}
});
}
}); 
} else {
$(this).tree('toggle', node.target);
}
}

效果截图:

先打开产品类型和基础产品页面

jQuery EasyUI Tab 选项卡问题小结

到 产品类型 添加数据

jQuery EasyUI Tab 选项卡问题小结

到基础产品 添加数据

jQuery EasyUI Tab 选项卡问题小结

我想要的效果达到了!

主要代码:

var content = '<iframe scrolling="auto" frameborder="0" src="'+ node.attributes.url+'" style="width:100%;height:99%;"></iframe>';
$('#mainTabs').tabs({
onSelect: function (title) {
var currTab = $('#mainTabs').tabs('getTab', title, node.attributes.url); 
var iframe = $(currTab.panel('options').content);
var src =iframe.attr('src'); 
$('#mainTabs').tabs('update',{ 
options: {
title: title,
href: src
}
});
}
});

以上所述是小编给大家介绍的jQuery EasyUI Tab 选项卡问题小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
纯js简单日历实现代码
Oct 05 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 #Javascript
js 自带的 map() 方法全面了解
Aug 16 #Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 #Javascript
js 自带的sort() 方法全面了解
Aug 16 #Javascript
JavaScript实战之菜单特效
Aug 16 #Javascript
深入理解js generator数据类型
Aug 16 #Javascript
js 创建对象 经典模式全面了解
Aug 16 #Javascript
You might like
Views rows style模板重写代码
2011/05/16 PHP
探讨php中header的用法详解
2013/06/07 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
Python 类的继承实例详解
2017/03/25 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
生日寿宴答谢词
2014/01/19 职场文书
民事申诉状范本
2015/05/20 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书