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

来源：互联网发布：最优化方法孙文瑜辅导编辑：程序博客网时间：2024/05/19 05:05

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>

<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显示部门整体排名：

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

还差按时间段统计。

0 0