SYSUI实现的组织架构图效果代码
代码语言：html
所属分类：图表
代码描述：SYSUI实现的组织架构图效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/SYSUI.js"></script>
<style type="text/css">
.themeModule {
position: fixed;
z-index: 0;
}
.menu-section {
position: relative;
z-index: 0;
}
.breadcrumb {
height: 100%;
padding-top: 100px;
}
.breadcrumb .column-name {
position: relative;
z-index: 10;
}
.breadcrumb .column-name .sys-childmenu {
position: relative;
float: left;
z-index: 1;
}
.breadcrumb .menuUl_title {
display: initial!important;
border-radius: 5px;
background: #0077AA;
color: #FFFFFF;
float: left;
line-height: 45px;
margin: 10px 50px;
}
.breadcrumb .sys-childmenu .menuUl_title:before {
content: "";
position: absolute;
z-index: 11;
width: 50px!important;
border-bottom: 1px solid #999999;
height: 1px!important;
}
.column-name .sys-childmenu:before {
content: "";
height: 100%;
border-left: 1px solid #999999;
position: absolute;
z-index: 5;
left: 0;
top: 0
}
.menulist .column-name .sys-childmenu.endthread:before {
border-left: 0px!important;
}
.column-name a.thread:before {
right: -50px!important;
width: 50px!important;
left: auto!important;
top: 50%;
border-bottom: 1px solid #999999;
height: 1px!important;
content: "";
position: absolute;
z-index: 11;
}
.column-name .sys-childmenu .menuUl_title:after,
.column-name .sys-childmenu a.thread:after {
right: auto!important;
left: -50px!important;
width: 50px!important;
top: 50%;
border-bottom: 1px solid #999999;
height: 1px!important;
content: "";
position: absolute;
z-index: 11;
}
.column-name:last-child:before {
height: 50%;
content: "";
position: absolute;
z-index: 11;
bottom: 0;
left: 0;
width: 1px;
background: #F2F2F2;
border-right: 1px solid #F2F2F2;
}
.column-name:first-child:before {
height: 50%;
content: "";
position: absolute;
z-index: 11;
top: 0;
left: 0;
width: 1px;
background: #F2F2F2;
border-right: 1px solid #F2F2F2;
}
.menulist .sys-color0 a {
background: #009933!important;
}
.menulist .sys-color0 a.thread:after {
border-bottom: 1px solid #009933!important;
}
.menulist .sys-color0 .menuUl_title:before {
border-bottom: 1px solid #009933!important;
}
.menulist .sys-color0 .sys-childmenu:before {
border-left: 1px solid #009933!important;
}
.menulist .sys-color1 a {
background: #D15B47!important;
}
.menulist .sys-color1 a.thread:after {
border-bottom: 1px solid #D15B47!important;
}
.menulist .sys-color1 .menuUl_title:before {
border-bottom: 1px solid #D15B47!important;
}
.menulist .sys-color1 .sys-childmenu:before {
border-left: 1px solid #D15B47!important;
}
.menulist .sys-color2 a {
background: #F32043!important;
}
.menulist .sys-color2 a.thread:after {
border-bottom: 1px solid #F32043!important;
}
.menulist .sys-color2 .menuUl_title:before {
border-bottom: 1px solid #F32043!important;
}
.menulist .sys-color2 .sys-childmenu:before {
border-left: 1px solid #F32043!important;
}
.menulist .sys-color3 a {
background: #3F5FBF!important;
}
.menulist .sys-color3 a.thread:after {
border-bottom: 1px solid #3F5FBF!important;
}
.menulist .sys-color3 .menuUl_title:before {
border-bottom: 1px solid #3F5FBF!important;
}
.menulist .sys-color3 .sys-childmenu:before {
border-left: 1px solid #3F5FBF!important;
}
.menulist .sys-color4 a {
background: #0785D1!important;
}
.menulist .sys-color4 a.thread:after {
border-bottom: 1px solid #0785D1!important;
}
.menulist .sys-color4 .menuUl_title:before {
border-bottom: 1px solid #0785D1!important;
}
.menulist .sys-color4 .sys-childmenu:before {
border-left: 1px solid #0785D1!important;
}
.menulist .sys-color5 a {
background: #E870E4!important;
}
.menulist .sys-color5 a.thread:after {
border-bottom: 1px solid #E870E4!important;
}
.menulist .sys-color5 .menuUl_title:before {
border-bottom: 1px solid #E870E4!important;
}
.menulist .sys-color5 .sys-childmenu:before {
border-left: 1px solid #E870E4!important;
}
.menulist .sys-color6 a {
background: #9A6E3A!important;
}
.menulist .sys-color6 a.thread:after {
border-bottom: 1px solid #9A6E3A!important;
}
.menulist .sys-color6 .menuUl_title:before {
border-bottom: 1px solid #9A6E3A!important;
}
.menulist .sys-color6 .sys-childmenu:before {
border-left: 1px solid #9A6E3A!important;
}
.menulist .sys-color7 a {
background: #5CB85C!important;
}
.menulist .sys-color7 a.thread:after {
border-bottom: 1px solid #5CB85C!important;
}
.menulist .sys-color7 .menuUl_title:before {
border-bottom: 1px solid #5CB85C!important;
}
.menulist .sys-color7 .sys-childmenu:before {
border-left: 1px solid #5CB85C!important;
}
.menulist .sys-color8 a {
background: #1FB5CC!important;
}
.menulist .sys-color8 a.thread:after {
border-bottom: 1px solid #1FB5CC!important;
}
.menulist .sys-color8 .menuUl_title:before {
border-bottom: 1px solid #1FB5CC!important;
}
.menulist .sys-color8 .sys-childmenu:before {
border-left: 1px solid #1FB5CC!important;
}
</style>
</head>
<body id="themeModule" class="backgroundf0">
<div id="pageModule" class="pageModule">
<div id="scrollbararea" class="scrollbararea">
<div class="breadcrumb" id="breadcrumb">
<div class="container">
<h2>事例1-地址链接操作</h2>
<ul class="clearfix menu-section menulist" id="jiagoulist" sys-template='html' sys-structure="tree" sys-grade="id,pid,grade">
<li class="clearfix column-name sys-tree" sys-keyset="id,pid,name,mun,time,status,grade" sys-status="status">
<a href="javascript:void(0)" sys-title-value="name" sys-type="href" sys-href="#" sys-keyset="id,name" class="name menuUl_title sys-region">
<span class="menu-text sys-region" sys-keyset="name" sys-type="text"></span>
<span class="menuicon sys-region" sys-keyset="mun" sys-type="text"></span>
</a>
</li>
</ul>
<h2>事例2-点击事件操作</h2>
<ul class="clearfix menu-section menulist" id="munlist" sys-template='html' sys-structure="tree" sys-grade="id,pid,grade">
<li class="clearfix column-name sys-tree" sys-keyset="id,pid,name,mun,time,status,grade" sys-status="status">
<a href="javascript:void(0)" sys-title-value="name" sys-type="onclick" sys-click="shijian(this)" sys-keyset="id,name" class="name menuUl_title sys-region">
<span class="menu-text sys-region" sys-keyset="name" sys-type="text"></span>
<span class="menuicon sys-region" sys-keyset="mun" sys-type="text"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
new SYSUI({
Module: '#themeModule',
mouIconClose: '', //箭头
mouIconOpen: '', // 箭头
Method: [{
'module': '#pageModule', event: function(sys, obj, Callback) {
//set事件集合，obj当前事件
obj.style.cssText = "height:"+ (sys.height())+"px"; //设置编辑内容的高度
var scrollDiv = sys.$("#scrollbararea"); //需要滚动的区域
sys.scrollbar(sys, obj, scrollDiv); //滚动条调用方法
}
}, {
'module': '#jiagoulist', event: function(set, obj) {
obj.style.display = "none";
var jsondata = [{
'id': 1, "pid": 0, "name": "公司架构", "grade": 0, "status": 0, "mun": 11
},
{
'id': 2, "pid": 1, "name": "董事办公室", "grade": 1, "status": 0, "mun": 11
},
{
'id': 3, "pid": 1, "name": "经理办公室", "grade": 1, "status": 0, "mun": 11
},
{
'id': 4, "pid": 1, "name": "工程部办公室", "grade": 1, "status": 0, "mun": 11
},
{
'id': 5, "pid": 1, "name": "财务办公室", "grade": 1, "status": 0, "mun": 11
},
{
'id': 6, "pid": 1, "name": "综合办公室", "grade": 1, "status": 0, "mun": 11
},
{
'id': 7, "pid": 2, "name": "总裁办公室", "grade": 2, "status": 0, "mun": 11
},
{
'id': 8, "pid&qu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0