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 26 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 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设计模式中的工厂模式
2008/06/12 PHP
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
基于php使用memcache存储session的详解
2013/06/25 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
Python 时间处理datetime实例
2008/09/06 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
django反向解析和正向解析的方式
2018/06/05 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Python连接字符串过程详解
2020/01/06 Python
python要安装在哪个盘
2020/06/15 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
公关关系专员的自我评价分享
2013/11/20 职场文书
医生进修自我鉴定
2014/01/19 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
教师师德考核自我评价
2014/09/13 职场文书
董事长助理岗位职责
2015/02/11 职场文书
不同意离婚答辩状
2015/05/22 职场文书