layui点击某列打开并跳转指定tab_layui 跳转tab_看完能不能点赞?的博客-程序员宝宝

技术标签: tab  layui  javascript  

第一步添加点击事件的a标签

//showRec是需要添加的监听的名称,d是这行数据

<script>
    //添加列点击事件
    var tplCompanyName = function (d) {
        var html = '<a style="color:#1E9FFF" href="javascript:;" lay-event="showRec"  >'+d.cgi+'</a>';
        return html;
    }
</script> 

 //绑定到需要点击的列上

 //在layui.use中添加监听   showTable是你自己的table的id  obj是这行数据 url是你要跳转的tab的lay-id   iframe中的url是跳转页面的控制层路径   'tab' 是你要跳转的tab的父页面的lay-filter

table.on('tool(showTable)', function(obj){
            switch(obj.event){
                case 'showRec':
                    var lon = obj.data.lon;
                    var lat = obj.data.lat;
                    var url = '1387327539137404929';  //跳转到gis的tab页面
                    //打开tab
                    if(parent.getTab(url) == 0){
                        window.parent.layui.element.tabAdd('tab', {
                            title: 'GIS可视化',
                            content: '<iframe lay-id="' + url + '" src="../index/gis" frameborder="0" class="admin-iframe" style="width: 1230px;height: 502px"></iframe>' //支持传入html
                            , id: url
                        });
                    }else{
                        //已经打开则先关闭再打开,这里本来想做每次跳进来都刷新页面,结果研究好几天不会整,暂时先做先关闭再打开。
                        window.parent.layui.element.tabDelete('tab',url);

                        window.parent.layui.element.tabAdd('tab', {
                            title: 'GIS可视化',
                            content: '<iframe lay-id="' + url + '" src="../index/gis" frameborder="0" class="admin-iframe" style="width: 1230px;height: 502px"></iframe>' //支持传入html
                            , id: url
                        });
                    }
                    //跳转到这个tab
                    window.parent.layui.element.tabChange('tab', url);
window.parent.$("iframe[data-frameid='" + url + "']").attr("src", window.parent.$("iframe[data-frameid='" + url + "']").attr("src"))//切换后刷新框架
                    //参数放到父页面让子页面调用
                    parent.setLon(lon);
                    parent.setLat(lat);
            }
        });

//父页面可以用来传递参数之类的

layui.use('element', function () {

        var lon = 1250000;//子页面需要的参数
        var lat = 430000;//子页面需要的参数
        var $ = layui.jquery;
        var element = layui.element; //导航的hover效果、二级菜单等功能,需要依赖element模块

        //此方法用于判断此tab是否已经打开
        window.getTab=function(url)
        {
            return $("li[lay-id='"+url+"']").length;
        }
        //此方法用于子页面进行传参
        window.getLon=function()
        {
            return this.lon;
        }
        window.setLon=function(lon)
        {
            this.lon = lon;
        }
        window.getLat=function()
        {
            return this.lat;
        }
        window.setLat=function(lat)
        {
            this.lat = lat;
        }

    });

、、、

大概就这样吧。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37889636/article/details/119413411

智能推荐

2021-4-2 416. 分割等和子集(动态规划,背包问题)_分割等和子集 状态压缩为什么要倒序_TABE_的博客-程序员宝宝

注:题目:给定一个只包含正整数的非空数组。是否可以将这个数组分割成两个子集,使得两个子集的元素和相等。注意:每个数组中的元素不会超过 100数组的大小不会超过 200示例 1:输入: [1, 5, 11, 5]输出: true解释: 数组可以分割成 [1, 5, 5] 和 [11].示例 2:输入: [1, 2, 3, 5]输出: false题解:一、问题分析对于这个问题,看起来和背包没有任何关系,为什么说它是背包问题呢?首先回忆一下背包问题大致的描述是什么:给你一个可装载

ElasticSearch使用多个分词器查询数据_elasticsearch 多个分词器_审判___的博客-程序员宝宝

确保ElasticSearch已经装了ik插件。@Autowiredprotected ElasticsearchTemplate elasticsearchTemplate;public List&lt;Map&lt;String, Object&gt;&gt; queryFromEs(String keyword){ SearchRequestBuilder searchRequestBuilder = elasticsearchTemplate.getClient().prepare

网站域名综合查询-批量免费网站域名综合查询工具-程序员宝宝

网站域名综合查询,怎么判断一个域名的好坏以及一个情况怎么样是需要通过大量的数据去分析的。今天给大家分享一个免费网站域名综合查询的工具。支持批量查询。导入域名即可查询网站的历史、网站备案情况、网站的状态、网站的收录情况、网站的蜘蛛来访、网站的排名、网站的死链接、网站的友链接、不仅可以批量查询网站域名,同时还可以批量自动管理网站。详细参考图片教程当优化网站搜索引擎优化,网站域名综合查询假如你晓得什么是网站优化的中心技术操作。那么网站优化就简单多了。当然,简单易用的含义并不是网站关键词能够快速排名,而是网站优化的

Maven常用命令_actionzh的博客-程序员宝宝

常用命令从某种意义上来说,软件是帮助不懂程序的人来操作计算机的,图形化界面尤其如此。在上个世纪,比尔盖茨之所以成为世界首富,微软之所以IT界的巨鳄,就是因为Windows开图形化操作之先河,并抢先占领了全球市场,笑傲江湖数十年,至今依然宝刀未老。诚然,现在几乎每种软件都有图形化界面,用鼠标点击几下就可以完成操作。Maven也不例外,在各类IDE中都有成熟的插件来简化操作。但是作为开发人员,应该时刻...

华为鸿蒙HarmonyOS -- 通过代码编写一个页面_郭宝的博客-程序员宝宝

效果图:具体步骤:在 “Project” 窗口,打开 entry &gt; src &gt; main &gt; java ,然后右击 com.example.helloword 文件夹,选择 New &gt; Ability &gt; Empty Page Ability (java)然后 将“Page Name”设置为“MeAbility”,点击“Finish”。创建完成后,可以看到新增了“MeAbility”和“MeAbilitySlic...

【opencv自学笔记】07:边缘保留滤波EPF_边缘保留滤波算法原理_lnplnp_的博客-程序员宝宝

两个APIbilateralFilter 双边滤波pyrMeanShiftFiltering 均值偏移滤波import cv2 as cvimport numpy as np#边缘保留滤波#高斯双边滤波 def bi_demo(image): dst=cv.bilateralFilter(image,0,100,30) cv.imshow('bi_demo'...

随便推点

5G安全体系与关键技术学习总结_5g bbu ipsec_BJTUYBYUAN的博客-程序员宝宝

5G安全概述1.1网络与信息安全概述网络安全:网络的硬件、软件及其系统不因网络攻击、非法入侵等遭到破坏,网络能够连续、可靠、正常地运行,服务不中断。侧重于网络环境的安全,是对异常、滥用行为的监测和防控;是信息安全的基础,是保护信息安全的重要手段;信息安全:网络承载的业务、数据表、内容、用户信息及其交互的安全,在各个运营过程中不被非法篡改、泄漏、具有完整性、保密性、可用性和合法合规性。侧重于信息产生、存储、传输、处理等过程的安全;是网络安全的价值体现和工作目标;1.2 5G网络概述三大应用.

【跟着英雄学算法第⑤天】计数法——附Leetcode刷题题解(C语言实现)_罅隙`的博客-程序员宝宝

前言 在这个系列中,博主准备分享每日在万人千题社区打卡学习的算法。博主也是小白,因此也很能理解新手在刷题时的困惑,所以关注博主,每天学习一道算法吧。同时也欢迎大家加入万人千题习活动,正所谓:一个人可以走的很快,但一群人才能走的更远。万人千题打卡社区https://bbs.csdn.net/forums/hero?category=0&amp;typeId=17913一、算法思想笔记我们知道,通过for循环,可以用一个计数变量计数出某个数出现多少次。那么如何反应一组数的数据分布...

一个三节点的PVE 6.1+CEPH集群,因为系统损坏,全部重新安装。_pve ceph重新安装_雷纯的博客-程序员宝宝

注意:逐一重装系统/重新加入PVE集群/重新加入CEPH集群;先禁用ceph的recover,避免其因OSD丢失重建:任一节点执行:for i in noout nobackfill norecover;do ceph osd set $i;done重新加入pve集群前确保已经从集群中删除步骤备份配置和证书备份到/root/bak/目录下,然后打包拷贝到其他地方保存(别忘了,否则就不能还原了):systemctl stop pvestatd.servicesystemctl stop

【VUE/H5】H5调起数字键盘的坑,及手写移动端键盘代码_LuviaWu的博客-程序员宝宝

h5 调起数字键盘的坑为了限制只能输入数字,不能输入小数点、加减号,走了敲多的弯路~~(查各种资料,然后各种测试)现下来看看笔记:HTML5加入了新的input类型 number,这是方便数量输入的。如果是在移动端中,属性type=”number”和type=”tel”会唤起系统的数字键盘,这对于交互还是挺友好的。一、 type="number"时1、只允许输入数字,(兼容ios、安卓)...

openwrt 19.07 ECMP 负载均衡_openwrt ecmp_重庆openwrt的博客-程序员宝宝

转载至:https://lwz322.github.io/2019/11/03/ECMP.html https://cumulusnetworks.com/blog/celebrating-ecmp-part-two/ https://cloud.tencent.com/developer/article/1449969 https://blog.csdn.net/wdscq1234/article/details/5264...

基于大恒相机SDK,二次开发_大恒相机sdk二次开发_ZZZF??的博客-程序员宝宝

基于大恒相机SDK,二次开发using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Threading.Tasks;...

推荐文章

热门文章

相关标签