getrebuild/rebuild
1
1
Fork 0
mirror of https://github.com/getrebuild/rebuild.git synced 2024-09-21 07:55:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: fixed headers and first-cell of datalist

Browse source
This commit is contained in:
devezhao 2020-03-19 14:05:44 +08:00
parent c55d4c52f8
commit 618900c009
2 changed files with 37 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/main/webapp/assets/css/rb-page.css
View file

@ -1068,7 +1068,7 @@ a {
background-color: #fff; background-color: #fff;
} }
.dataTables_wrapper .rb-datatable-header.pin { .dataTables_wrapper .rb-datatable-header.header-fixed {
position: sticky; position: sticky;
top: 60px; top: 60px;
background-color: #fff; background-color: #fff;
@ -1094,15 +1094,10 @@ a {
padding: 9px 10px; padding: 9px 10px;
} }
.data-list .table thead.pin tr>th {
position: sticky;
top: 0;
background-color: #fff;
}
.data-list .table thead th { .data-list .table thead th {
padding-top: 10px; padding-top: 10px;
padding-bottom: 8px; padding-bottom: 8px;
background-color: #fff;
} }
.data-list .table thead th.column-checkbox>div>.custom-control.custom-control-sm { .data-list .table thead th.column-checkbox>div>.custom-control.custom-control-sm {
@ -1319,6 +1314,22 @@ i.split.ui-draggable-dragging {
overflow: unset !important; overflow: unset !important;
} }
.column-fixed::before,
.table.table-header-fixed thead>tr>th::before {
content: '';
position: absolute;
left: 0;
width: 100%;
bottom: -1px;
border-bottom: 1px solid #dee2e6;
}
th.column-fixed::before,
.table.table-header-fixed thead>tr>th::before {
bottom: -2px;
border-bottom: 2px solid #dee2e6;
}
th.column-fixed { th.column-fixed {
z-index: 1; z-index: 1;
} }
@ -1332,7 +1343,7 @@ th.column-fixed {
content: ''; content: '';
pointer-events: none; pointer-events: none;
transform: translateX(100%); transform: translateX(100%);
box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15); box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s; transition: box-shadow 0.3s;
} }
@ -1345,7 +1356,12 @@ th.column-fixed {
} }
.data-list .table tbody tr.active td.column-fixed { .data-list .table tbody tr.active td.column-fixed {
background-color: #dee2e6; background-color: #dee2e6
}
.table.table-header-fixed thead>tr>th {
position: sticky;
top: 0;
} }
.form.batch-form { .form.batch-form {

21
src/main/webapp/assets/js/rb-datalist.jsx
View file

@ -114,7 +114,8 @@ class RbList extends React.Component {
// enable pins // enable pins
if ($(window).height() > 666 && $(window).width() >= 1280) { if ($(window).height() > 666 && $(window).width() >= 1280) {
$('.main-content').addClass('pb-0') $('.main-content').addClass('pb-0')
$('.main-content .rb-datatable-header').addClass('pin') $('.main-content .rb-datatable-header').addClass('header-fixed')
if (!rb.ie) $scroller.find('.table').addClass('table-header-fixed')
$addResizeHandler(() => { $addResizeHandler(() => {
let mh = $(window).height() - 215 let mh = $(window).height() - 215
@ -124,14 +125,16 @@ class RbList extends React.Component {
})() })()
} }
let slLast = 0 if (!rb.ie) {
$scroller.on('ps-scroll-x', () => { let slLast = 0
const sl = $scroller[0].scrollLeft $scroller.on('ps-scroll-x', () => {
if (sl === slLast) return const sl = $scroller[0].scrollLeft
slLast = sl if (sl === slLast) return
if (sl > 0) $scroller.addClass('column-fixed-pin') slLast = sl
else $scroller.removeClass('column-fixed-pin') if (sl > 0) $scroller.addClass('column-fixed-pin')
}) else $scroller.removeClass('column-fixed-pin')
})
}
const that = this const that = this
$scroller.find('th .split').draggable({ $scroller.find('th .split').draggable({