You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

630 lines
11 KiB

  1. /*
  2. *名称:jfGrid
  3. *版本号: V1.0.0
  4. *日期:2017.03.04
  5. *作者: JFine开发团队
  6. *描述:世界上最好用的表格,您的使用是对我们最大的支持!
  7. */
  8. /*表格布局区域*/
  9. .jfgrid-layout {
  10. position: relative;
  11. height: 100%;
  12. width: 100%;
  13. color: #000;
  14. overflow: hidden;
  15. padding-top: 28px;
  16. padding-left: 30px;
  17. }
  18. .jfgrid-move-line {
  19. position: absolute;
  20. height: 100%;
  21. width: 2px;
  22. background: #666;
  23. top: 0;
  24. left: 10px;
  25. display: none;
  26. z-index: 11;
  27. cursor: col-resize;
  28. }
  29. /*交界区域*/
  30. .jfgrid-border {
  31. -moz-user-select: none;
  32. -webkit-user-select: none;
  33. -ms-user-select: none;
  34. -khtml-user-select: none;
  35. user-select: none;
  36. position: absolute;
  37. top: 0;
  38. left: 0;
  39. border-bottom: 1px solid #ddd;
  40. height: 28px;
  41. background-color: #f8f8f8;
  42. z-index: 2;
  43. }
  44. .jfgrid-border-col {
  45. position: relative;
  46. width: 100%;
  47. height: 100%;
  48. }
  49. .jfgrid-border-cell {
  50. position: absolute;
  51. top: 0;
  52. left: 0;
  53. width: 30px;
  54. height: 100%;
  55. border-right: 1px solid #ddd;
  56. }
  57. .jfgrid-border-cb {
  58. text-align: center;
  59. }
  60. /*头部显示区域*/
  61. .jfgrid-head {
  62. -moz-user-select: none;
  63. -webkit-user-select: none;
  64. -ms-user-select: none;
  65. -khtml-user-select: none;
  66. user-select: none;
  67. position: absolute;
  68. top: 0;
  69. left: 0;
  70. border-bottom: 1px solid #ddd;
  71. height: 28px;
  72. min-width: 100%;
  73. background-color: #f8f8f8;
  74. z-index: 1;
  75. }
  76. .jfgrid-head-cell {
  77. position: absolute;
  78. line-height: 27px;
  79. height: 28px;
  80. width: 100px;
  81. top: 0;
  82. left: 0;
  83. padding: 0px 3px;
  84. border-right: 1px solid #ddd;
  85. border-bottom: 1px solid #ddd;
  86. cursor: pointer;
  87. }
  88. .jfgrid-heed-sort {
  89. position: absolute;
  90. top: 50%;
  91. right: 0px;
  92. width: 16px;
  93. text-align: center;
  94. line-height: initial;
  95. margin-top: -12px;
  96. display: none;
  97. }
  98. .jfgrid-heed-sort > i {
  99. font-size: 16px;
  100. color: #B3B7BA;
  101. display: block;
  102. }
  103. .jfgrid-heed-sort > i.active {
  104. color: #475059;
  105. }
  106. .jfgrid-heed-sort > i.fa-caret-up {
  107. margin-bottom: -8px;
  108. }
  109. .jfgrid-heed-sort > i.fa-caret-down {
  110. margin-top: -8px;
  111. }
  112. .jfgrid-heed-move {
  113. position: absolute;
  114. width: 5px;
  115. height: 100%;
  116. top: 0;
  117. right: -2px;
  118. cursor: col-resize;
  119. z-index: 10;
  120. }
  121. /*左侧区域*/
  122. .jfgrid-left {
  123. position: absolute;
  124. min-height: 100%;
  125. width: 30px;
  126. top: 0;
  127. left: 0;
  128. }
  129. .jfgrid-hide-cell {
  130. display: none;
  131. }
  132. /*滚动显示区域*/
  133. .jfgrid-scrollarea {
  134. position: relative;
  135. height: 100%;
  136. width: 100%;
  137. overflow: auto;
  138. }
  139. .jfgrid-scrollarea-content {
  140. position: relative;
  141. }
  142. .jfgrid-data-cell {
  143. position: relative;
  144. float: left;
  145. height: 28px;
  146. width: 30px;
  147. line-height: 27px;
  148. border-bottom: 1px dashed #d7d7d7;
  149. padding: 0px 3px;
  150. cursor: pointer;
  151. overflow: hidden;
  152. white-space: nowrap;
  153. text-overflow: ellipsis;
  154. }
  155. .jfgrid-subgird-cell {
  156. position: relative;
  157. float: left;
  158. height: 28px;
  159. width: 30px;
  160. border-bottom: 1px dashed #d7d7d7;
  161. padding: 0px 0px;
  162. }
  163. .jfgrid-data-cell-last {
  164. border-right: 1px solid #d7d7d7;
  165. }
  166. .jfgrid-data-cell.jfgrid-data-cell-over {
  167. background-color: #FFF6E5;
  168. }
  169. .jfgrid-data-cell.jfgrid-head-cell-selected {
  170. background-color: #3498DB !important;
  171. color: #fff;
  172. }
  173. .jfgrid-data-cell .fa-toggle-on {
  174. color: #1bb99a;
  175. font-size: 13pt;
  176. vertical-align: middle;
  177. }
  178. .jfgrid-data-cell .fa-toggle-off {
  179. color: #aaa;
  180. font-size: 13pt;
  181. vertical-align: middle;
  182. }
  183. .jfgrid-tool-cell {
  184. width: 30px;
  185. text-align: center;
  186. }
  187. .jfgrid-tool-cell > input {
  188. margin-top: 7px;
  189. cursor: pointer;
  190. }
  191. .jfgrid-tool-cell > i {
  192. color: #222;
  193. }
  194. .jfgrid-tool-cell.jfgrid-head-cell-selected > i {
  195. color: #fff;
  196. }
  197. /*翻页条*/
  198. .jfgrid-page-bar {
  199. -moz-user-select: none;
  200. -webkit-user-select: none;
  201. -ms-user-select: none;
  202. -khtml-user-select: none;
  203. user-select: none;
  204. position: absolute;
  205. bottom: 0;
  206. left: 0;
  207. width: 100%;
  208. height: 35px;
  209. border-top: 1px solid #ddd;
  210. background-color: #fff;
  211. border-radius: 0px 0px 3px 3px;
  212. z-index: 5;
  213. }
  214. .jfgrid-page-bar-info {
  215. position: absolute;
  216. top: 0;
  217. left: 10px;
  218. font-size: 12px;
  219. height: 100%;
  220. line-height: 34px;
  221. color: #475059;
  222. }
  223. .jfgrid-page-bar-info > span {
  224. position: relative;
  225. top: -1px;
  226. color: #475059;
  227. }
  228. .jfgrid-page-bar .paginations {
  229. margin: 0px;
  230. position: absolute;
  231. right: 4px;
  232. top: 4px;
  233. height: 26px;
  234. line-height: 26px;
  235. }
  236. .jfgrid-page-bar .pagination input {
  237. display: block;
  238. top: 0;
  239. left: 0;
  240. height: 26px;
  241. margin: 0;
  242. top: 0;
  243. border-radius: 4px;
  244. width: 45px;
  245. line-height: 1.5;
  246. position: relative;
  247. float: left;
  248. text-align:center;
  249. }
  250. .jfgrid-page-bar .pagination {
  251. margin: 0px;
  252. }
  253. .jfgrid-page-bar .pagination > li > a, .pagination > li > span {
  254. color: #475059;
  255. }
  256. .jfgrid-page-bar .pagination-sm > li > a {
  257. padding: 3px 8px;
  258. font-size: 12px;
  259. line-height: 1.5;
  260. }
  261. .jfgrid-page-bar .pagination > li > span {
  262. padding: 3px 0px;
  263. font-size: 12px;
  264. line-height: 1.5;
  265. border: 0px;
  266. }
  267. .pagination > li > a.active,
  268. .pagination > li > a:focus {
  269. color: #ffffff;
  270. background-color: #3498DB;
  271. border-color: #3498DB;
  272. }
  273. .pagination > li > span.active,
  274. .pagination > li > span:focus {
  275. color: #475059;
  276. }
  277. .pagination > li > span:hover {
  278. background-color: #fff;
  279. color: #475059;
  280. }
  281. /*底部行条*/
  282. .jfgrid-footerrow {
  283. -moz-user-select: none;
  284. -webkit-user-select: none;
  285. -ms-user-select: none;
  286. -khtml-user-select: none;
  287. user-select: none;
  288. position: absolute;
  289. bottom: 0;
  290. left: 0;
  291. width: 100%;
  292. height: 28px;
  293. border-top: 1px solid #ddd;
  294. background-color: #fff;
  295. border-radius: 0px 0px 3px 3px;
  296. z-index: 5;
  297. background-color: #f8f8f8;
  298. }
  299. /*统计条*/
  300. .jfgrid-statistics {
  301. -moz-user-select: none;
  302. -webkit-user-select: none;
  303. -ms-user-select: none;
  304. -khtml-user-select: none;
  305. user-select: none;
  306. position: absolute;
  307. top: 0;
  308. left: 0;
  309. height: 27px;
  310. min-width: 100%;
  311. background-color: #f8f8f8;
  312. z-index: 1;
  313. }
  314. .jfgrid-statistics .jfgrid-data-cell {
  315. border-bottom: 0 !important;
  316. }
  317. /*子表样式*/
  318. .jfgrid_chlidgird {
  319. position: absolute;
  320. height: 300px;
  321. width: 100%;
  322. left: 0;
  323. top: 0;
  324. background-color: #fff;
  325. border-top: 1px solid #ddd;
  326. border-bottom: 1px solid #ddd;
  327. padding-right: 5px;
  328. }
  329. .jfgrid_subgird_left {
  330. position: absolute;
  331. height: 100%;
  332. border-right: 1px solid #ddd;
  333. top: 0;
  334. left: 0;
  335. }
  336. .jfgrid-chlidgird-content {
  337. position: relative;
  338. width: 100%;
  339. height: 100%;
  340. z-index: 1;
  341. }
  342. /*背景图片*/
  343. .jfgrid-nodata-img {
  344. position: absolute;
  345. top: 50%;
  346. left: 50%;
  347. height: 180px;
  348. width: 380px;
  349. margin: -90px 0px 0px -190px;
  350. background-image: url(img/nodata.jpg);
  351. background-repeat: no-repeat;
  352. }
  353. /*滚动条样式*/
  354. .jfgrid-layout .mCSB_container_wrapper {
  355. margin: 0 !important;
  356. }
  357. .jfgrid-layout .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  358. background-color: #B3B3B3 !important;
  359. }
  360. .jfgrid-layout .mCSB_scrollTools .mCSB_draggerRail {
  361. background-color: initial !important;
  362. background-color: none !important;
  363. }
  364. .jfgrid-layout .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  365. bottom: -6px;
  366. }
  367. .jfgrid-layout .mCSB_scrollTools_vertical {
  368. right: -6px;
  369. }
  370. /*树形*/
  371. .jfgrid-data-cell-expend {
  372. position: relative;
  373. float: left;
  374. text-align: right;
  375. height: 100%;
  376. }
  377. .jfgrid-data-cell-expend > i {
  378. width: 16px;
  379. text-align: center;
  380. height: 100%;
  381. line-height: 28px;
  382. }
  383. /*加载图标*/
  384. .jfgrid-loading {
  385. position: absolute;
  386. top: 0;
  387. left: 0;
  388. height: 100%;
  389. width: 100%;
  390. z-index: 10;
  391. display: none;
  392. }
  393. .jfgrid-loading > .bg {
  394. position: absolute;
  395. top: 0;
  396. left: 0;
  397. height: 100%;
  398. width: 100%;
  399. background-color: #000;
  400. opacity: 0.02;
  401. -moz-opacity: 0.02;
  402. filter: alpha(opacity=2);
  403. }
  404. .jfgrid-loading > .img {
  405. position: relative;
  406. left: 0;
  407. top: 50%;
  408. z-index: 1;
  409. color: #666;
  410. font-size: 20px;
  411. border: 1px solid #bbb;
  412. width: 320px;
  413. height: 80px;
  414. line-height: 78px;
  415. padding-left: 80px;
  416. padding-right: 20px;
  417. background: #fff;
  418. border-radius: 8px;
  419. background-image: url(img/loading.gif);
  420. background-repeat: no-repeat;
  421. background-position: 8px 50%;
  422. box-shadow: 0 1px 15px rgba(0,0,0,.175);
  423. margin: auto;
  424. margin-top: -40px;
  425. }
  426. /*编辑行样式*/
  427. .jfgrid-data-cell > input[type="text"] {
  428. position: absolute;
  429. top: 0;
  430. left: 0;
  431. width: 100%;
  432. height: 100%;
  433. border: 0;
  434. background-color: #fff;
  435. border: 0px;
  436. outline: 0;
  437. padding: 0 4px;
  438. }
  439. .jfgrid-data-cell .form-label {
  440. display: block;
  441. position: absolute;
  442. top: 0;
  443. left: 0;
  444. width: 100%;
  445. height: 100%;
  446. padding: 0 4px;
  447. background-color: #fff;
  448. color: #000;
  449. cursor: default;
  450. }
  451. .jfgrid-data-cell .form-select {
  452. position: absolute;
  453. top: 0;
  454. left: 0;
  455. width: 100%;
  456. height: 100%;
  457. padding: 0 4px;
  458. background-color: #fff;
  459. color: #000;
  460. cursor: default;
  461. }
  462. .jfgrid-data-cell .form-select > .fa-ellipsis-h {
  463. display: block;
  464. position: absolute;
  465. top: 9px;
  466. right: 4px;
  467. color: #888;
  468. cursor: pointer;
  469. }
  470. /*弹层*/
  471. .jfgrid-layer {
  472. position: absolute;
  473. top: 0;
  474. left: 0;
  475. width: 100%;
  476. height: 100%;
  477. z-index: 100;
  478. }
  479. .jfgrid-layer-bg {
  480. position: absolute;
  481. top: 0;
  482. left: 0;
  483. width: 100%;
  484. height: 100%;
  485. background-color: #000;
  486. opacity: 0.15;
  487. filter: alpha(opacity=15);
  488. }
  489. .jfgrid-layer-remove {
  490. position: absolute;
  491. width: 12px;
  492. height: 13px;
  493. display: block;
  494. top: 0px;
  495. right: 4px;
  496. font-size: 16px;
  497. color: #666;
  498. cursor: pointer;
  499. }
  500. .jfgrid-layer-remove:hover {
  501. color: #000;
  502. }
  503. .jfgrid-layer-content {
  504. position: absolute;
  505. background-color: #fff;
  506. border: 1px solid #ccc;
  507. top: 50%;
  508. left: 50%;
  509. box-shadow: 1px 1px 50px rgba(0,0,0,.3);
  510. border-radius: 4px;
  511. padding-top: 30px;
  512. }
  513. .jfgird-select {
  514. position: relative;
  515. height: 100%;
  516. width: 100%;
  517. padding-top: 40px;
  518. }
  519. .jfgird-select-tool {
  520. position: absolute;
  521. top: 0;
  522. left: 0;
  523. border-top: 1px solid #ddd;
  524. border-bottom: 1px solid #ddd;
  525. height: 40px;
  526. width: 100%;
  527. }
  528. .jfgird-select-tool-item {
  529. position: relative;
  530. float: left;
  531. padding-top: 5px;
  532. padding-left: 5px;
  533. }
  534. .jfgird-select-tool-item .btn {
  535. height: 28px;
  536. margin-bottom: 1px;
  537. line-height: 14px;
  538. }
  539. /*工具条*/
  540. .jfgrid-toolbar {
  541. position: absolute;
  542. bottom: 0;
  543. left: 0;
  544. height: 27px;
  545. width: 80px;
  546. background: #f8f8f8;
  547. z-index: 10;
  548. }
  549. .jfgrid-toolbar > span {
  550. line-height: 27px;
  551. margin-left: 10px;
  552. cursor: pointer;
  553. color: #555;
  554. }
  555. .jfgrid-toolbar > span:hover {
  556. color: #000;
  557. }