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之AJAX框架使用说明
Apr 24 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 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高效率写法(详解原因)
2013/06/20 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
PHP chop()函数讲解
2019/02/11 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
Python 功能和特点(新手必学)
2015/12/30 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python__new__内置静态方法使用解析
2020/01/07 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
Django跨域请求原理及实现代码
2020/11/14 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
会计专业自荐信
2013/12/02 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
实习科室评语
2015/01/04 职场文书
领导视察通讯稿
2015/07/18 职场文书
超市店长竞聘书
2015/09/15 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers