Merit价值和成果管理系统——1侧栏与iframe

时间:2022-06-10
本文章向大家介绍Merit价值和成果管理系统——1侧栏与iframe,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/52268963

                  Merit成果登记系统—1、侧栏菜单和iframe联动
 今晚开不了工了,记录一下昨晚到今天凌晨的成果吧。
 应该是前天晚上到凌晨,总算搞定了一个小小功能。著名的ztree树状菜单拥有a href=***,target=“iframename”,就是这个ztree作为树状侧栏放在左侧,在它上面点击一个链接,就可以 在右侧的iframe里打开一个页面。要实现这个功能,必须要具有target属性,而我用的是bootstrap treevie这个侧栏插件,它却没有target,于是搜作者的github里的issue,果然有人问过,作者说可以用其他方法代替这个功能:用事件event功能,当点击一个nodes,触发这个event,然后这里面就可以写逻辑代码,比如,指定在iframe里打开指定的页面。上代码:
 这里面的的坑:就是$('#treeview').on('nodeSelected', function(event, data) {
 这里的data作为返回值,是json结构,死活也没想到,后来在 http://www.cnblogs.com/tiancai/p/5749232.html这里才找到端倪。那剩下的就提取这个data里的部门id或者人员id就可以打开部门或人员的业绩情况了。
 另外一个就是jquery如何开某个网页显示在iframe里。就是这句就行了。 document.getElementById("iframepage").src="/secofficeshow?secid="+data.Id+"&level="+data.Level;

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>成果登记系统</title>
 <script type="text/javascript" src="/static/js/jquery-2.1.3.min.js"></script>
 <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
 <script src="/static/js/bootstrap-treeview.js"></script>
 <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
 <style type="text/css">
 a:active{text:expression(target="_blank");}
 i#delete
 {
 color:#DC143C;
 }
 </style>
 <script type="text/javascript">
 var allLinks=document.getElementsByTagName("a");
 for(var i=0;i!=allLinks.length; i++){
 allLinks[i].target="_blank";
 }
 </script>
 </head>
 <!-- 侧栏 -->
 <div id="treeview" class="col-xs-3"></div>
 <!-- <a href="/category/view?id={{.Id}}" target='main'> -->
 <div class="col-lg-9">
 <div class="form-group">
 <label class="control-label" id="regis" for="LoginForm-UserName"></label>
 </div>
 <iframe src="/secofficeshow" name='main' id="iframepage" frameborder="0" width="100%" scrolling="no" marginheight="0" marginwidth="0" onLoad="iFrameHeight()"></iframe>
 </div> 
 <script type="text/javascript">
 $(function() {
 // alert(JSON.stringify({{.json}}));
 $('#treeview').treeview({
 data: [{{.json}}],
 levels: 3,// expanded to 5 levels
 enableLinks:true,
 showTags:true,
 // collapseIcon:"glyphicon glyphicon-chevron-up",
 // expandIcon:"glyphicon glyphicon-chevron-down",
 });
 $('#treeview').on('nodeSelected', function(event, data) {
 // alert("名称:"+data.text);
 // alert("节点id:"+data.nodeId);
 // alert("部门id:"+data.Id); 
 // alert("部门级别:"+data.Level);
 $("#regis").html(data.text);
 $("#regis").css("color","black");
 document.getElementById("iframepage").src="/secofficeshow?secid="+data.Id+"&level="+data.Level;
 }); 
 });
 // 自动适应高度 
 function iFrameHeight() { 
 var ifm= document.getElementById("iframepage"); 
 var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
 if(ifm != null && subWeb != null) {
 ifm.height = subWeb.body.scrollHeight;
 ifm.width = subWeb.body.scrollWidth;
 } 
 }

 点击部门的右侧iframe显示部门整体排名:

点击个人查看详细:图纸、报告……

还差按时间段统计。