Django 搭建CMDB系统完整[3](主页面)
main_page.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CMDB-后台系统</title>
<link href="/static/style/authority/main_css.css" rel="stylesheet" type="text/css" />
<link href="/static/style/authority/zTreeStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/static/scripts/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/static/scripts/zTree/jquery.ztree.core-3.2.js"></script>
<script type="text/javascript" src="/static/scripts/authority/commonAll.js"></script>
<script type="text/javascript">
/退出系统/
function logout(){
if(confirm("您确定要退出本系统吗？")){
window.location.href = "/login/";
}
}
/**获得当前日期**/ function getDate01(){ var time = new Date(); var myYear = time.getFullYear(); var myMonth = time.getMonth()+1; var myDay = time.getDate(); if(myMonth < 10){ myMonth = "0" + myMonth; } document.getElementById("yue_fen").innerHTML = myYear + "." + myMonth; document.getElementById("day_day").innerHTML = myYear + "." + myMonth + "." + myDay; } /**加入收藏夹**/ function addfavorite(){ var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf("360se") > -1){ art.dialog({icon:'error', title:'友情提示', drag:false, resize:false, content:'由于360浏览器功能限制，加入收藏夹功能失效', ok:true,}); }else if (ua.indexOf("msie 8") > -1){ window.external.AddToFavoritesBar('${dynamicURL}/authority/loginInit.action','xmrbi-cmdb');//IE8 }else if (document.all){ window.external.addFavorite('${dynamicURL}/authority/loginInit.action','xmrbi-cmdb'); }else{ art.dialog({icon:'error', title:'友情提示', drag:false, resize:false, content:'添加失败，请用ctrl+D进行添加', ok:true,}); } } </script> <script type="text/javascript"> /* zTree插件加载目录的处理 */ var zTree; var setting = { view: { dblClickExpand: false, showLine: false, expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast" }, data: { key: { name: "resourceName" }, simpleData: { enable:true, idKey: "resourceID", pIdKey: "parentID", rootPId: "" } }, callback: { // beforeExpand: beforeExpand, // onExpand: onExpand, onClick: zTreeOnClick } }; var curExpandNode = null; function beforeExpand(treeId, treeNode) { var pNode = curExpandNode ? curExpandNode.getParentNode():null; var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null; for(var i=0, l=!treeNodeP ? 0:treeNodeP.children.length; i<l; i++ ) { if (treeNode !== treeNodeP.children[i]) { zTree.expandNode(treeNodeP.children[i], false); } } while (pNode) { if (pNode === treeNode) { break; } pNode = pNode.getParentNode(); } if (!pNode) { singlePath(treeNode); } } function singlePath(newNode) { if (newNode === curExpandNode) return; if (curExpandNode && curExpandNode.open==true) { if (newNode.parentTId === curExpandNode.parentTId) { zTree.expandNode(curExpandNode, false); } else { var newParents = []; while (newNode) { newNode = newNode.getParentNode(); if (newNode === curExpandNode) { newParents = null; break; } else if (newNode) { newParents.push(newNode); } } if (newParents!=null) { var oldNode = curExpandNode; var oldParents = []; while (oldNode) { oldNode = oldNode.getParentNode(); if (oldNode) { oldParents.push(oldNode); } } if (newParents.length>0) { for (var i = Math.min(newParents.length, oldParents.length)-1; i>=0; i--) { if (newParents[i] !== oldParents[i]) { zTree.expandNode(oldParents[i], false); break; } } }else { zTree.expandNode(oldParents[oldParents.length-1], false); } } } } curExpandNode = newNode; } function onExpand(event, treeId, treeNode) { curExpandNode = treeNode; } /** 用于捕获节点被点击的事件回调函数 **/ function zTreeOnClick(event, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("dleft_tab1"); zTree.expandNode(treeNode, null, null, null, true); // zTree.expandNode(treeNode); // 规定：如果是父类节点，不允许单击操作 if(treeNode.isParent){ // alert("父类节点无法点击哦..."); return false; } // 如果节点路径为空或者为"#"，不允许单击操作 if(treeNode.accessPath=="" || treeNode.accessPath=="#"){ //alert("节点路径为空或者为'#'哦..."); return false; } // 跳到该节点下对应的路径, 把当前资源ID(resourceID)传到后台，写进Session rightMain(treeNode.accessPath); if( treeNode.isParent ){ $('#here_area').html('当前位置：'+treeNode.getParentNode().resourceName+' > <span style="color:#1A5CC6">'+treeNode.resourceName+'</span>'); }else{ $('#here_area').html('当前位置：系统 > <span style="color:#1A5CC6">'+treeNode.resourceName+'</span>'); } }; /* 上方菜单 */ function switchTab(tabpage,tabid){ var oItem = document.getElementById(tabpage).getElementsByTagName("li"); for(var i=0; i<oItem.length; i++){ var x = oItem[i]; x.className = ""; } if('left_tab1' == tabid){ $(document).ajaxStart(onStart).ajaxSuccess(onStop); // 异步加载"业务模块"下的菜单 loadMenu('YEWUMOKUAI', 'dleft_tab1'); }else if('left_tab2' == tabid){ $(document).ajaxStart(onStart).ajaxSuccess(onStop); // 异步加载"系统管理"下的菜单 loadMenu('XITONGMOKUAI', 'dleft_tab1'); }else if('left_tab3' == tabid){ $(document).ajaxStart(onStart).ajaxSuccess(onStop); // 异步加载"其他"下的菜单 loadMenu('QITAMOKUAI', 'dleft_tab1'); } } $(document).ready(function(){ $(document).ajaxStart(onStart).ajaxSuccess(onStop); /** 默认异步加载"业务模块"目录 **/ loadMenu('YEWUMOKUAI', "dleft_tab1"); // 默认展开所有节点 if( zTree ){ // 默认展开所有节点 zTree.expandAll(true); } }); function loadMenu(resourceType, treeObj){ /*$.ajax({ type:"POST", url:"${dynamicURL}/authority/modelPart.action?resourceType=" + resourceType, dataType : "json", success:function(data){ // 如果返回数据不为空，加载"业务模块"目录 if(data != null){ // 将返回的数据赋给zTree $.fn.zTree.init($("#"+treeObj), setting, data); alert(treeObj); zTree = $.fn.zTree.getZTreeObj(treeObj); if( zTree ){ // 默认展开所有节点 zTree.expandAll(true); } } } });*/ data = [{"accessPath":"","checked":false,"delFlag":0,"parentID":1,"resourceCode":"","resourceDesc":"","resourceGrade":2,"resourceID":3,"resourceName":"菜单一","resourceOrder":0,"resourceType":""},
{"accessPath":"house_list.html","checked":false,"delFlag":0,"parentID":3,"resourceCode":"","resourceDesc":"","resourceGrade":2,"resourceID":31,"resourceName":"菜单1","resourceOrder":0,"resourceType":""},
{"accessPath":"","checked":false,"delFlag":0,"parentID":3,"resourceCode":"","resourceDesc":"","resourceGrade":2,"resourceID":32,"resourceName":"菜单2","resourceOrder":0,"resourceType":""},
{"accessPath":"","checked":false,"delFlag":0,"parentID":1,"resourceCode":"","resourceDesc":"","resourceGrade":2,"resourceID":4,"resourceName":"菜单二","resourceOrder":0,"resourceType":""},
{"accessPath":"","checked":false,"delFlag":0,"parentID":4,"resourceCode":"","resourceDesc":"","resourceGrade":2,"resourceID":41,"resourceName":"菜单3","resourceOrder":0,"resourceType":""},
{"accessPath":"","checked":false,"delFlag":0,"parentID":4,"resourceCode":"","resourceDesc":"","resourceGrade":2,"resourceID":42,"resourceName":"菜单4","resourceOrder":0,"resourceType":""}];
// 如果返回数据不为空，加载"业务模块"目录
if(data != null){
// 将返回的数据赋给zTree("#"+treeObj), setting, data);
// alert(treeObj);
zTree = $.fn.zTree.getZTreeObj(treeObj);
if( zTree ){
// 默认展开所有节点
zTree.expandAll(true);
}
}
}
//ajax start function function onStart(){ $("#ajaxDialog").show(); } //ajax stop function function onStop(){ // $("#ajaxDialog").dialog("close"); $("#ajaxDialog").hide(); } </script> </head>
<body onload="getDate01()">
<div id="top">
<div id="top_logo">
<img alt="logo" src="/static/images/common/logo.jpg" width="274" height="49" style="vertical-align:middle;">
</div>
<div id="top_links">
<div id="top_op">
<ul>
<li>
<img alt="当前用户" src="/static/images/common/user.jpg">：
<span>{% if user.username %}{{ user.username }}{% else %}anonymous user!You need to <a href="/login/">login</a>{% endif %}</span>
</li>
<li>
<img alt="事务月份" src="/static/images/common/month.jpg">：
<span id="yue_fen"></span>
</li>
<li>
<img alt="今天是" src="/static/images/common/date.jpg">：
<span id="day_day"></span>
</li>
</ul>
</div>
<div id="top_close">
<a href="javascript:void(0);" onclick="logout();" target="_parent">
<img alt="退出系统" title="退出系统" src="/static/images/common/close.jpg" style="position: relative; top: 10px; left: 25px;">
</a>
</div>
</div>
</div>
<div id="side">
<div id="left_menu">
<ul id="TabPage2" style="height:200px; margin-top:50px;">
<li id="left_tab1" class="selected" onClick="javascript:switchTab('TabPage2','left_tab1');" title="服务器资产管理">
<img alt="服务器资产管理" title="服务器资产管理" src="/static/images/common/1_hover.jpg" width="33" height="31">
</li>
<li id="left_tab2" onClick="javascript:switchTab('TabPage2','left_tab2');" title="监控管理系统">
<img alt=" 监控管理系统" title=" 监控管理系统" src="/static/images/common/2.jpg" width="33" height="31">
</li>
<li id="left_tab3" onClick="javascript:switchTab('TabPage2','left_tab3');" title="系统管理">
<img alt=" 系统管理" title="系统管理" src="/static/images/common/3.jpg" width="33" height="31">
</li>
</ul>
<div id="nav_show" style="position:absolute; bottom:0px; padding:10px;"> <a href="javascript:;" id="show_hide_btn"> <img alt="显示/隐藏" title="显示/隐藏" src="/static/images/common/nav_hide.png" width="35" height="35"> </a> </div> </div> <div id="left_menu_cnt"> <div id="nav_module"> <img src="/static/images/common/module_1.png" width="210" height="58"/> </div> <div id="nav_resource"> <ul id="dleft_tab1" class="ztree"></ul> </div> </div> </div> <script type="text/javascript"> $(function(){ $('#TabPage2 li').click(function(){ var index = $(this).index(); $(this).find('img').attr('src', '/static/images/common/'+ (index+1) +'_hover.jpg'); $(this).css({background:'#fff'}); $('#nav_module').find('img').attr('src', '/static/images/common/module_'+ (index+1) +'.png'); $('#TabPage2 li').each(function(i, ele){ if( i!=index ){ $(ele).find('img').attr('src', '/static/images/common/'+ (i+1) +'.jpg'); $(ele).css({background:'#044599'}); } }); // 显示侧边栏 switchSysBar(true); }); // 显示隐藏侧边栏 $("#show_hide_btn").click(function() { switchSysBar(); }); }); /**隐藏或者显示侧边栏**/ function switchSysBar(flag){ var side = $('#side'); var left_menu_cnt = $('#left_menu_cnt'); if( flag==true ){ // flag==true left_menu_cnt.show(500, 'linear'); side.css({width:'280px'}); $('#top_nav').css({width:'77%', left:'304px'}); $('#main').css({left:'280px'}); }else{ if ( left_menu_cnt.is(":visible") ) { left_menu_cnt.hide(10, 'linear'); side.css({width:'60px'}); $('#top_nav').css({width:'100%', left:'60px', 'padding-left':'28px'}); $('#main').css({left:'60px'}); $("#show_hide_btn").find('img').attr('src', '/static/images/common/nav_show.png'); } else { left_menu_cnt.show(500, 'linear'); side.css({width:'280px'}); $('#top_nav').css({width:'77%', left:'304px', 'padding-left':'0px'}); $('#main').css({left:'280px'}); $("#show_hide_btn").find('img').attr('src', '/static/images/common/nav_hide.png'); } } } </script> <!-- side menu start --> <div id="top_nav"> <span id="here_area">当前位置：系统 > 系统介绍</span> </div> <div id="main"> <iframe name="right" id="rightMain" src="" frameborder="no" scrolling="auto" width="100%" height="100%" allowtransparency="true"/> </div> </body>
</html>
关注公众号 低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。
- 上一篇
es6中的数值 --------之开发常用
1、开发中我们经常会要用到 判断接口返回的是不是数字 或者数字是不是null es6提供了下面方法ES6 在Number对象上，新提供了Number.isFinite()和Number.isNaN()两个方法Number.isFinite()用来检查一个数值是否为有限的（finite），即不是Infinity。 Number.isFinite(15); // true Number.isFinite(0.8); // true Number.isFinite(NaN); // false Number.isFinite(Infinity); // false Number.isFinite(-Infinity); // false Number.isFinite('foo'); // false Number.isFinite('15'); // false Number.isFinite(true); // false 注意，如果参数类型不是数值，Number.isFinite一律返回false。Number.isNaN()用来检查一个值是否为NaN。 如果参数类型不是NaN，Num...
- 下一篇
【JavaScript游戏开发】使用HTML5 canvas开发的网页版中国象棋项目
版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81905647 //V1.0 : 实现棋子的布局，画布及游戏场景的初始化 //V2.0 : 实现棋子的颜色改变 //V3.0 ：实现所有象棋的走棋规则 //V4.0 : 实现所有棋子的吃子功能 完整的项目源码已经开源：https://github.com/xiugangzhang/ChineseChess 项目在线预览地址： http://htmlpreview.github.io/?https://github.com/xiugangzhang/ChineseChess/blob/master/ChineseChess.html 目前就实现了上面的几个功能，最近也么时间再弄了，需要的朋友可以自己下载下来继续开发哈！ 主要特点： 1.无任何插件和第三方库，纯原生js实现 2.没使用任何素材，棋盘和棋子都是由canvas画布绘制 <!DOCTYPE html> ...
相关文章
文章评论
共有0条评论来说两句吧...
微信收款码
支付宝收款码