|
- /*
- *名称:jfGrid
- *版本号: V1.0.0
- *日期:2017.03.04
- *作者: JFine开发团队
- *描述:世界上最好用的表格,您的使用是对我们最大的支持!
- */
-
- /*表格布局区域*/
- .jfgrid-layout {
- position: relative;
- height: 100%;
- width: 100%;
- color: #000;
- overflow: hidden;
- padding-top: 28px;
- padding-left: 30px;
- }
-
- .jfgrid-move-line {
- position: absolute;
- height: 100%;
- width: 2px;
- background: #666;
- top: 0;
- left: 10px;
- display: none;
- z-index: 11;
- cursor: col-resize;
- }
-
- /*交界区域*/
- .jfgrid-border {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- -khtml-user-select: none;
- user-select: none;
- position: absolute;
- top: 0;
- left: 0;
- border-bottom: 1px solid #ddd;
- height: 28px;
- background-color: #f8f8f8;
- z-index: 2;
- }
-
- .jfgrid-border-col {
- position: relative;
- width: 100%;
- height: 100%;
- }
-
- .jfgrid-border-cell {
- position: absolute;
- top: 0;
- left: 0;
- width: 30px;
- height: 100%;
- border-right: 1px solid #ddd;
- }
-
- .jfgrid-border-cb {
- text-align: center;
- }
- /*头部显示区域*/
- .jfgrid-head {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- -khtml-user-select: none;
- user-select: none;
- position: absolute;
- top: 0;
- left: 0;
- border-bottom: 1px solid #ddd;
- height: 28px;
- min-width: 100%;
- background-color: #f8f8f8;
- z-index: 1;
- }
-
- .jfgrid-head-cell {
- position: absolute;
- line-height: 27px;
- height: 28px;
- width: 100px;
- top: 0;
- left: 0;
- padding: 0px 3px;
- border-right: 1px solid #ddd;
- border-bottom: 1px solid #ddd;
- cursor: pointer;
- }
-
- .jfgrid-heed-sort {
- position: absolute;
- top: 50%;
- right: 0px;
- width: 16px;
- text-align: center;
- line-height: initial;
- margin-top: -12px;
- display: none;
- }
-
- .jfgrid-heed-sort > i {
- font-size: 16px;
- color: #B3B7BA;
- display: block;
- }
-
- .jfgrid-heed-sort > i.active {
- color: #475059;
- }
-
- .jfgrid-heed-sort > i.fa-caret-up {
- margin-bottom: -8px;
- }
-
- .jfgrid-heed-sort > i.fa-caret-down {
- margin-top: -8px;
- }
-
- .jfgrid-heed-move {
- position: absolute;
- width: 5px;
- height: 100%;
- top: 0;
- right: -2px;
- cursor: col-resize;
- z-index: 10;
- }
- /*左侧区域*/
- .jfgrid-left {
- position: absolute;
- min-height: 100%;
- width: 30px;
- top: 0;
- left: 0;
- }
-
- .jfgrid-hide-cell {
- display: none;
- }
- /*滚动显示区域*/
- .jfgrid-scrollarea {
- position: relative;
- height: 100%;
- width: 100%;
- overflow: auto;
- }
-
- .jfgrid-scrollarea-content {
- position: relative;
- }
-
- .jfgrid-data-cell {
- position: relative;
- float: left;
- height: 28px;
- width: 30px;
- line-height: 27px;
- border-bottom: 1px dashed #d7d7d7;
- padding: 0px 3px;
- cursor: pointer;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-
- .jfgrid-subgird-cell {
- position: relative;
- float: left;
- height: 28px;
- width: 30px;
- border-bottom: 1px dashed #d7d7d7;
- padding: 0px 0px;
- }
-
- .jfgrid-data-cell-last {
- border-right: 1px solid #d7d7d7;
- }
-
- .jfgrid-data-cell.jfgrid-data-cell-over {
- background-color: #FFF6E5;
- }
-
- .jfgrid-data-cell.jfgrid-head-cell-selected {
- background-color: #3498DB !important;
- color: #fff;
- }
-
- .jfgrid-data-cell .fa-toggle-on {
- color: #1bb99a;
- font-size: 13pt;
- vertical-align: middle;
- }
-
- .jfgrid-data-cell .fa-toggle-off {
- color: #aaa;
- font-size: 13pt;
- vertical-align: middle;
- }
-
- .jfgrid-tool-cell {
- width: 30px;
- text-align: center;
- }
-
- .jfgrid-tool-cell > input {
- margin-top: 7px;
- cursor: pointer;
- }
-
- .jfgrid-tool-cell > i {
- color: #222;
- }
-
- .jfgrid-tool-cell.jfgrid-head-cell-selected > i {
- color: #fff;
- }
- /*翻页条*/
- .jfgrid-page-bar {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- -khtml-user-select: none;
- user-select: none;
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 35px;
- border-top: 1px solid #ddd;
- background-color: #fff;
- border-radius: 0px 0px 3px 3px;
- z-index: 5;
- }
-
- .jfgrid-page-bar-info {
- position: absolute;
- top: 0;
- left: 10px;
- font-size: 12px;
- height: 100%;
- line-height: 34px;
- color: #475059;
- }
-
- .jfgrid-page-bar-info > span {
- position: relative;
- top: -1px;
- color: #475059;
- }
-
- .jfgrid-page-bar .paginations {
- margin: 0px;
- position: absolute;
- right: 4px;
- top: 4px;
- height: 26px;
- line-height: 26px;
- }
-
- .jfgrid-page-bar .pagination input {
- display: block;
- top: 0;
- left: 0;
- height: 26px;
- margin: 0;
- top: 0;
- border-radius: 4px;
- width: 45px;
- line-height: 1.5;
- position: relative;
- float: left;
- text-align:center;
- }
-
-
- .jfgrid-page-bar .pagination {
- margin: 0px;
- }
-
- .jfgrid-page-bar .pagination > li > a, .pagination > li > span {
- color: #475059;
- }
-
- .jfgrid-page-bar .pagination-sm > li > a {
- padding: 3px 8px;
- font-size: 12px;
- line-height: 1.5;
- }
-
- .jfgrid-page-bar .pagination > li > span {
- padding: 3px 0px;
- font-size: 12px;
- line-height: 1.5;
- border: 0px;
- }
-
- .pagination > li > a.active,
- .pagination > li > a:focus {
- color: #ffffff;
- background-color: #3498DB;
- border-color: #3498DB;
- }
-
- .pagination > li > span.active,
- .pagination > li > span:focus {
- color: #475059;
- }
-
- .pagination > li > span:hover {
- background-color: #fff;
- color: #475059;
- }
-
-
- /*底部行条*/
- .jfgrid-footerrow {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- -khtml-user-select: none;
- user-select: none;
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 28px;
- border-top: 1px solid #ddd;
- background-color: #fff;
- border-radius: 0px 0px 3px 3px;
- z-index: 5;
- background-color: #f8f8f8;
- }
- /*统计条*/
- .jfgrid-statistics {
- -moz-user-select: none;
- -webkit-user-select: none;
- -ms-user-select: none;
- -khtml-user-select: none;
- user-select: none;
- position: absolute;
- top: 0;
- left: 0;
- height: 27px;
- min-width: 100%;
- background-color: #f8f8f8;
- z-index: 1;
- }
-
- .jfgrid-statistics .jfgrid-data-cell {
- border-bottom: 0 !important;
- }
-
-
- /*子表样式*/
- .jfgrid_chlidgird {
- position: absolute;
- height: 300px;
- width: 100%;
- left: 0;
- top: 0;
- background-color: #fff;
- border-top: 1px solid #ddd;
- border-bottom: 1px solid #ddd;
- padding-right: 5px;
- }
-
- .jfgrid_subgird_left {
- position: absolute;
- height: 100%;
- border-right: 1px solid #ddd;
- top: 0;
- left: 0;
- }
-
- .jfgrid-chlidgird-content {
- position: relative;
- width: 100%;
- height: 100%;
- z-index: 1;
- }
- /*背景图片*/
- .jfgrid-nodata-img {
- position: absolute;
- top: 50%;
- left: 50%;
- height: 180px;
- width: 380px;
- margin: -90px 0px 0px -190px;
- background-image: url(img/nodata.jpg);
- background-repeat: no-repeat;
- }
- /*滚动条样式*/
- .jfgrid-layout .mCSB_container_wrapper {
- margin: 0 !important;
- }
-
- .jfgrid-layout .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
- background-color: #B3B3B3 !important;
- }
-
- .jfgrid-layout .mCSB_scrollTools .mCSB_draggerRail {
- background-color: initial !important;
- background-color: none !important;
- }
-
- .jfgrid-layout .mCSB_scrollTools.mCSB_scrollTools_horizontal {
- bottom: -6px;
- }
-
- .jfgrid-layout .mCSB_scrollTools_vertical {
- right: -6px;
- }
-
- /*树形*/
- .jfgrid-data-cell-expend {
- position: relative;
- float: left;
- text-align: right;
- height: 100%;
- }
-
- .jfgrid-data-cell-expend > i {
- width: 16px;
- text-align: center;
- height: 100%;
- line-height: 28px;
- }
-
- /*加载图标*/
- .jfgrid-loading {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- z-index: 10;
- display: none;
- }
-
- .jfgrid-loading > .bg {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- background-color: #000;
- opacity: 0.02;
- -moz-opacity: 0.02;
- filter: alpha(opacity=2);
- }
-
- .jfgrid-loading > .img {
- position: relative;
- left: 0;
- top: 50%;
- z-index: 1;
- color: #666;
- font-size: 20px;
- border: 1px solid #bbb;
- width: 320px;
- height: 80px;
- line-height: 78px;
- padding-left: 80px;
- padding-right: 20px;
- background: #fff;
- border-radius: 8px;
- background-image: url(img/loading.gif);
- background-repeat: no-repeat;
- background-position: 8px 50%;
- box-shadow: 0 1px 15px rgba(0,0,0,.175);
- margin: auto;
- margin-top: -40px;
- }
-
- /*编辑行样式*/
- .jfgrid-data-cell > input[type="text"] {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border: 0;
- background-color: #fff;
- border: 0px;
- outline: 0;
- padding: 0 4px;
- }
-
- .jfgrid-data-cell .form-label {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- padding: 0 4px;
- background-color: #fff;
- color: #000;
- cursor: default;
- }
-
- .jfgrid-data-cell .form-select {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- padding: 0 4px;
- background-color: #fff;
- color: #000;
- cursor: default;
- }
-
- .jfgrid-data-cell .form-select > .fa-ellipsis-h {
- display: block;
- position: absolute;
- top: 9px;
- right: 4px;
- color: #888;
- cursor: pointer;
- }
-
- /*弹层*/
- .jfgrid-layer {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 100;
- }
-
- .jfgrid-layer-bg {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: #000;
- opacity: 0.15;
- filter: alpha(opacity=15);
- }
-
- .jfgrid-layer-remove {
- position: absolute;
- width: 12px;
- height: 13px;
- display: block;
- top: 0px;
- right: 4px;
- font-size: 16px;
- color: #666;
- cursor: pointer;
- }
-
- .jfgrid-layer-remove:hover {
- color: #000;
- }
-
- .jfgrid-layer-content {
- position: absolute;
- background-color: #fff;
- border: 1px solid #ccc;
- top: 50%;
- left: 50%;
- box-shadow: 1px 1px 50px rgba(0,0,0,.3);
- border-radius: 4px;
- padding-top: 30px;
- }
-
-
-
- .jfgird-select {
- position: relative;
- height: 100%;
- width: 100%;
- padding-top: 40px;
- }
-
- .jfgird-select-tool {
- position: absolute;
- top: 0;
- left: 0;
- border-top: 1px solid #ddd;
- border-bottom: 1px solid #ddd;
- height: 40px;
- width: 100%;
- }
-
- .jfgird-select-tool-item {
- position: relative;
- float: left;
- padding-top: 5px;
- padding-left: 5px;
- }
-
- .jfgird-select-tool-item .btn {
- height: 28px;
- margin-bottom: 1px;
- line-height: 14px;
- }
-
- /*工具条*/
- .jfgrid-toolbar {
- position: absolute;
- bottom: 0;
- left: 0;
- height: 27px;
- width: 80px;
- background: #f8f8f8;
- z-index: 10;
- }
-
- .jfgrid-toolbar > span {
- line-height: 27px;
- margin-left: 10px;
- cursor: pointer;
- color: #555;
- }
-
- .jfgrid-toolbar > span:hover {
- color: #000;
- }
|