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显示部门整体排名:
点击个人查看详细:图纸、报告……
还差按时间段统计。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 安装Go运行环境
- Python 语法问题-module 'pip' has no attribute 'pep425tags',告诉你如何正确查看pip支持,32位、64位查看pip支持万能方法
- 使用matplotlib绘制3D图表
- 微服务的用户认证与授权杂谈(下)
- Python 库安装问题-用pip安装pyHook3报错,原因及解决办法
- 微服务的用户认证与授权杂谈(上)
- Python 技术篇-win32、amd64结尾的whl库该选哪个,如何查看python平台支持
- Python 基础篇-pip卸载python库方法,pip命令大全
- Python 技术篇-pip安装的python库缓存位置查看方法,如何查看python库源码
- Redis持久化 - RDB和AOF
- Python 技术篇-pip只下载python库不安装方法,pip命令大全
- Python 技术篇-将项目打包成whl文件,whl包的制作方法
- PowerBI 超级粘性用户计算 - 原理与实现
- Chrome 技术篇-常用web调试手法:清除缓存并硬性重新加载
- 数据库之索引模块