nth.tabs.js监听tab点击、菜单点击，刷新相应子页面

最近在维护jsp项目（前端技术：jquery、vue、element-ui、nth.tabs.js、bootstrap.js等）

需求：监听tab页切换调用刷新数据函数，监听菜单调用刷新数据函数

tab页由nth.tabs.js结合bootstrap.js生成，菜单数据后端返回，其中后端使用Spring的RequestMapping做映射。

思路：分析代码可知，使用nth.tabs.js生成的tab页面其实是在主页面里面嵌套iframe子页面，iframe外有一层tab的div，这个div的id就是新增tab页面的id，首先取得当前活动页的iframe，然后使用contentWindow返回 iframe 中的文档，进而调用iframe里面的vue实例的方法对象。

关键代码（写在主页面里的）：

//    监听tab点击和菜单点击事件
        $('.nav.nav-tabs').on('click','li',function(e){ // 点击tab按钮，判断是否停止刷新首页任务
            var idStr = e.currentTarget.children[0].hash // 取的ifram外层的div id
           if($(idStr)[0].childNodes[0].contentWindow.clinicTable){ // 判断是否是预算页面
               $(idStr)[0].childNodes[0].contentWindow.clinicTable.getTableData() // 调用预算页面的getTableData()函数
           }
        });
        $(".el-menu").on('click','.el-menu-item',function(e){ // 点击左侧菜单
            var idStrMenu = '#'+main.nthTabs.getActiveId() //取得当前处于激活状态的tab页id
            if($(idStrMenu)[0].childNodes[0].contentWindow.clinicTable){
                $(idStrMenu)[0].childNodes[0].contentWindow.clinicTable.getTableData()
            }
        });

其中clinicTable是iframe里面的vue实例，getTableData()就是刷新当前页的函数。

写在最后，如果使用vue全家桶，前端配置路由，监听路由变化调用刷新函数是很简单的，但是这个是老项目，使用较多的前端技术栈，比较复杂，没有使用vue全家桶，所以只能监听dom节点的点击事件刷新对应的子页面。

维护老项目好痛苦啊！！！

nth.tabs.js监听tab点击、菜单点击，刷新相应子页面

猜你喜欢