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 相关文章推荐
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
原生js+ajax分页组件
Jan 30 Javascript
js仿淘宝放大镜效果
Dec 28 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
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
python调试神器PySnooper的使用
2019/07/03 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
高二生物教学反思
2014/01/27 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
社会公德演讲稿
2014/05/20 职场文书
计算机专业自荐信
2014/05/24 职场文书
六年级数学教学反思
2016/02/16 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
React如何创建组件
2021/06/27 Javascript
python playwrigh框架入门安装使用
2022/07/23 Python