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 相关文章推荐
document.all与WEB标准
May 13 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
使用Ajax实现无刷新上传文件
Apr 12 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使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Python异常处理操作实例详解
2018/08/28 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
详解python 爬取12306验证码
2019/05/10 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
Python进行特征提取的示例代码
2020/10/15 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
表达自我的市场:Society6
2018/08/01 全球购物
座谈会主持词
2014/03/20 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
房产公证书格式
2015/01/26 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python