/* *名称: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; }