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

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

作者头像
hotqin888
发布2018-09-11 14:43:15
1.3K0
发布2018-09-11 14:43:15
举报
文章被收录于专栏:hotqin888的专栏

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

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

作者说用这个

代码语言:javascript
复制
nodeSelected

解决。

代码如下:

代码语言:javascript
复制
左侧栏:
代码语言:javascript
复制
<div id="treeview" class="col-xs-3"></div>
代码语言:javascript
复制
右侧iframe
代码语言:javascript
复制
<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
复制
显示树
代码语言:javascript
复制
$('#treeview').treeview({
          data: json,//defaultData,
          // data:alternateData,
          enableLinks:true,
          showTags:true,
          // collapseIcon:"glyphicon glyphicon-chevron-up",
          // expandIcon:"glyphicon glyphicon-chevron-down",
        });
代码语言:javascript
复制
实现点击菜单,在iframe中打开页面
代码语言:javascript
复制
$('#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
复制

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

参考:

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

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档