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条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker快速安装Oracle11G，搭建oracle11g学习环境
- MySQL数据库在高并发下的优化方案
- SpringBoot2整合Thymeleaf，官方推荐html解决方案
- SpringBoot2编写第一个Controller，响应你的http请求并返回结果
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2全家桶，快速入门学习开发网站教程
- Springboot2将连接池hikari替换为druid，体验最强大的数据库连接池
- Dcoker安装(在线仓库)，最新的服务器搭配容器使用
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2配置默认Tomcat设置，开启更多高级功能
微信收款码
支付宝收款码