前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >bootstrap treeview实现target功能,iframe中打开页面

bootstrap treeview实现target功能,iframe中打开页面

作者头像
hotqin888
发布于 2018-09-11 06:43:15
发布于 2018-09-11 06:43:15
1.3K00
代码可运行
举报
文章被收录于专栏:hotqin888的专栏hotqin888的专栏
运行总次数:0
代码可运行

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1334367

既然是treeview是侧栏,那么肯定都是用target=iframename这种连接方式,在右边的iframe中打开页面啊,可惜这个插件没这个属性。

作者说用这个

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
nodeSelected

解决。

代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
左侧栏:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="treeview" class="col-xs-3"></div>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
右侧iframe
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="col-lg-9">
        <iframe src="/secofficeshow" name='main' id="iframepage" frameborder="0" width="100%" scrolling="no" marginheight="0" marginwidth="0" onLoad="iFrameHeight()"></iframe>
</div> 
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
显示树
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('#treeview').treeview({
          data: json,//defaultData,
          // data:alternateData,
          enableLinks:true,
          showTags:true,
          // collapseIcon:"glyphicon glyphicon-chevron-up",
          // expandIcon:"glyphicon glyphicon-chevron-down",
        });
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
实现点击菜单,在iframe中打开页面
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('#treeview').on('nodeSelected', function(event, data) {
          // clickNode(event, data)  
            alert(JSON.stringify(data));
            alert(data.text);
            alert(data.nodeId); 
          document.getElementById("iframepage").src="/secofficeshow?secid="+data.nodeId;
          // document.getElementById("iframepage").src="http://www.baidu.com";

          var arr = $('#treeview').treeview('getSelected');
            alert(JSON.stringify(arr));

        });
代码语言:javascript
代码运行次数:0
运行
复制

坑:这个返回值data是json格式,所以折腾半天。

参考:

http://www.cnblogs.com/tiancai/p/5749232.html

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016年08月17日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Merit价值和成果管理系统——1侧栏与iframe
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/52268963
hotqin888
2018/09/11
5170
Merit价值和成果管理系统——1侧栏与iframe
bootstrap treeview 增删改的正确姿势
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/54798737
hotqin888
2018/09/11
2.3K0
记一次bootstrap-treeview的使用
插件描述:bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。
一觉睡到小时候
2019/07/03
7.1K0
记一次bootstrap-treeview的使用
JQuery iframe宽高度自适应浏览器窗口大小的解决方法
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
授客
2019/08/21
6.9K0
JQuery iframe宽高度自适应浏览器窗口大小的解决方法
使用 WebSocket 实现跨域 iframe 通信
本文是使用 WebSocket 实现跨域 iframe 通信思路实现了一个本地 Demo,功能有:
草帽lufei
2024/05/08
3150
使用 WebSocket 实现跨域 iframe 通信
bootstrap table x-editable select2——带图标的选择
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/78149202
hotqin888
2018/09/11
4.2K0
bootstrap table x-editable select2——带图标的选择
Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页
$("#tab-a-" + options.menuID).click(); // 选中打开的tab
授客
2019/08/21
7.9K1
Cordova插件使用——Themeablebrowser数据花式交互
Themeablebrowser是一个外部浏览器插件,它fork自inappbrowser,相比于后者,此插件的目的是提供一个可以与你的应用程序的主题相匹配的in-app-browser,以便给你的应用保持一致的外观和感觉。所以,除了一些主题化的配置外,核心部分使用参考inappbrowser文档。
IT晴天
2018/08/20
1.9K0
【HTML】iframe跨域访问问题
概述 本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度。 1.问题重现: Chrome 版本 41.0.2272.10
悟空聊架构
2018/05/18
4.7K0
【Html.js——功能实现】收集帛书碎片(蓝桥杯真题-5135)【合集】
请在 collect-puzzle.js 文件中补全函数 collectPuzzle 中的代码,返回包含不同帛书碎片的数组,最终拼出完整的战国帛书,需要注意:
Rossy Yan
2025/02/17
430
【Html.js——功能实现】收集帛书碎片(蓝桥杯真题-5135)【合集】
干货 | 前端常用的通信技术
作者简介 陈为平,携程市场部前端工程师,目前主要负责“携程运动”项目的大前端相关工作。 前段时间在忙开发携程运动项目和相应的微信小程序,其中和后端通信犹为频繁。get、post请求方法是很多前端童鞋使用最频繁的;websocket在11年盛行后方便了客户端和服务器之间传输,……and so on ,除了这些,还有很多我们不常使用的其他方式,但是在实际的业务场景中却真实需要。 本文总结了目前前端使用到的数据交换方式,阐述了业务场景中如何选择适合的方式进行数据交换( form ,xhr, fetch, SSE
携程技术
2018/03/16
2.3K0
干货 | 前端常用的通信技术
JavaScript中的沙箱机制探秘[二]:iFrame沙箱实现方案详解
在上一篇文中,我们接触了JavaScript中的sandbox的概念,并且就现阶段的一些实现思路做了总结,包括YUI的闭包、iframe的sandbox以及Nodejs的VM和child_process模块,在文中我们也知道了各自实现的局限性。而对于前端来说,让前端的第三方js代码能够从本质上产生隔离,并且让后端参与部分安全管控是最理想的状态。在这些方案中,在引擎层面制造隔离的iframe方案显然是最简单可行的。
星回
2018/08/02
4.6K0
JavaScript中的沙箱机制探秘[二]:iFrame沙箱实现方案详解
原 荐 自己写JSON编辑器
作者:汪娇娇 时间:2018年1月15日 下一篇:自己写代码对比工具 时间过得好快,一下子就2018年了,想起好久没写博客,不觉有些浪费了时光,今天便来补一篇。 JSON是个伟大的东西,各处都用得到,既方便也纠结。用的溜的人那就没啥说的了,但也有用的不溜的或者想偷懒的人,那JSON也算是一个小小的槛吧。怎么说呢,就比如说有的人到现在连JSON的正确格式都写不对,也有人写对了但并没有自信自己是否写对,那这时候就需要一个校验工具来检验JSON格式的正确性。既然有了校验,那格式化工具怎么能少,再随着需求的增加,我
jojo
2018/05/03
3.3K0
原                    荐                                                            自己写JSON编辑器
滴滴前端二面高频面试题合集
CORS需要浏览器和服务器同时支持,整个CORS过程都是浏览器完成的,无需用户参与。因此实现CORS的关键就是服务器,只要服务器实现了CORS请求,就可以跨源通信了。
aync_sync
2023/02/24
1.1K0
golang-fullcalendar,engineercms完善日历事件-支持拖曳drop,改变时间resize
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/54023362
hotqin888
2018/09/11
2K0
golang-fullcalendar,engineercms完善日历事件-支持拖曳drop,改变时间resize
基于node+socket.io+redis的多房间多进程聊天室
本文作者:IMWeb jaychen 原文出处:IMWeb社区 未经同意,禁止转载 一、相关技术介绍: 消息实时推送,指的是将消息实时地推送到浏览器,用户不需要刷新浏览器就可以实时获取最新的消息
IMWeb前端团队
2018/01/08
3.1K0
基于node+socket.io+redis的多房间多进程聊天室
iframe跨域调用js_ajax跨域访问
本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度。
全栈程序员站长
2022/11/10
11K0
iframe跨域调用js_ajax跨域访问
这次全了,8种超详细Web跨域解决方案!
导语 | 在日常开发过程中,我们通常都会遇到ajax跨域请求或者前端跨域通信的开发场景。无论是前端同学还是后端同学都需要具备解决跨域问题的能力。本文总结梳理了常见的跨域场景、跨域解决方案及其优缺点,希望可以作为大家解决跨域问题的参考。 一、什么是跨域 当a.qq.com域名下的页面或脚本试图去请求b.qq.com域名下的资源时,就是典型的跨域行为。跨域的定义从受限范围可以分为两种,广义跨域和狭义跨域。 (一)广义跨域 广义跨域通常包含以下三种行为: 资源跳转:a链接、重定向。 资源嵌入:<li
腾讯云开发者
2021/10/11
5K0
商城项目回顾整理(一)前台页面布局
登录页面: 1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 6 <head> 7 <
二十三年蝉
2018/02/28
1.8K0
velocity渲染JS文件,file-node.js分析
velocity渲染JS文件,file-node.js分析 $(function() { var filePath = document.getElementById("filePathRem").value; //注意这里面只能处理寻找文件夹的子文件或者子文件夹事件,可以把文件的读取写到 $('#container').on("changed.jstree", function (e, data)函数中 $('#container').jstree({ 'core'
用户1503405
2021/10/07
6.5K0
推荐阅读
相关推荐
Merit价值和成果管理系统——1侧栏与iframe
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文