diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFixedColumn.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFixedColumn.razor index cc37d71bc8c..90df4a6069b 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFixedColumn.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesFixedColumn.razor @@ -15,15 +15,16 @@
@((MarkupString)Localizer["TablesFixedColHeaderDescription"].Value)
- + - - + + +
@@ -34,7 +35,7 @@ Name="FixedColTableHeader"> Fixed attribute to fix the header", - "TablesFixedColHeaderDescription": "In this example, set NameDateTimeComplete The first two columns and the last column are fixed columns, and the middle columns are scrolled horizontally", + "TablesFixedColHeaderDescription": "In this example, set NameEducationCountComplete The first two columns and the last column are fixed columns, and the middle columns are scrolled horizontally", "TablesFixedColTableHeaderTitle": "Fixed headers and columns", "TablesFixedColTableHeaderIntro": "Set IsFixedHeader=\"true\" to fix the header, set Fixed to fix the column", "TablesFixedExtendButtonsColumnTitle": "Fixed button action column", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 136b5dac7f5..b31b50a7c7c 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -83,7 +83,7 @@ "TablesFixedColumnNote": "固定列用法请尽可能的设置固定列宽度,本页面如果宽度过长,请 F12 人为减小可视页面宽度", "TablesFixedColHeaderTitle": "固定列头与列尾", "TablesFixedColHeaderIntro": "设置 Fixed 属性固定表头", - "TablesFixedColHeaderDescription": "本例中设置 NameDateTimeComplete 前两列和最后一列为固定列,中间各列进行水平滚动", + "TablesFixedColHeaderDescription": "本例中设置 NameEducationCountComplete 前两列和最后一列为固定列,中间各列进行水平滚动,本例中设置 AllowResize=\"true\" 固定列也可以调整宽度", "TablesFixedColTableHeaderTitle": "固定表头与列", "TablesFixedColTableHeaderIntro": "设置 IsFixedHeader=\"true\" 固定表头,设置 Fixed 对列进行固定", "TablesFixedExtendButtonsColumnTitle": "固定按钮操作列", diff --git a/src/BootstrapBlazor/Components/Table/Table.razor b/src/BootstrapBlazor/Components/Table/Table.razor index d2eb49b8845..dc43d634afa 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor +++ b/src/BootstrapBlazor/Components/Table/Table.razor @@ -602,7 +602,7 @@ } - @if (!col.Fixed && AllowResizing) + @if (AllowResizing) { } diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.js b/src/BootstrapBlazor/Components/Table/Table.razor.js index 600f2ca65fc..7a2d55c18b3 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.js +++ b/src/BootstrapBlazor/Components/Table/Table.razor.js @@ -586,9 +586,10 @@ const setResizeListener = table => { const marginX = eventX - originalX table.tables.forEach(t => { const group = [...t.children].find(i => i.nodeName === 'COLGROUP') + const calcColWidth = colWidth + marginX; if (group) { const curCol = group.children.item(colIndex) - curCol.style.width = `${colWidth + marginX}px` + curCol.style.setProperty('width', `${calcColWidth}px`); const tableEl = curCol.closest('table') let width = tableWidth + marginX if (t.closest('.table-fixed-body')) { @@ -606,6 +607,22 @@ const setResizeListener = table => { tip.update(); } } + + const header = col.parentElement; + if (header.classList.contains('fixed')) { + resizeNextFixedColumnWidth(header, calcColWidth); + } + } + + const tbody = [...t.children].find(i => i.nodeName === 'TBODY'); + if (tbody) { + const rows = [...tbody.children].filter(i => i.nodeName === 'TR'); + rows.forEach(row => { + const header = row.children.item(colIndex); + if (header.classList.contains('fixed')) { + resizeNextFixedColumnWidth(header, calcColWidth); + } + }); } }) }, @@ -624,6 +641,25 @@ const setResizeListener = table => { }) } +const resizeNextFixedColumnWidth = (col, width) => { + if (col.classList.contains('fixed-right')) { + const nextColumn = col.previousElementSibling; + if (nextColumn.classList.contains('fixed')) { + const right = parseFloat(col.style.getPropertyValue('right')); + nextColumn.style.setProperty('right', `${right + width}px`); + resizeNextFixedColumnWidth(nextColumn, nextColumn.offsetWidth); + } + } + else if (col.classList.contains('fixed')) { + const nextColumn = col.nextElementSibling; + if (nextColumn.classList.contains('fixed')) { + const left = parseFloat(col.style.getPropertyValue('left')); + nextColumn.style.setProperty('left', `${left + width}px`); + resizeNextFixedColumnWidth(nextColumn, nextColumn.offsetWidth); + } + } +} + const setColumnResizingListen = (table, col) => { if (table.options.showColumnWidthTooltip) { EventHandler.on(col, 'mouseenter', e => { diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.scss b/src/BootstrapBlazor/Components/Table/Table.razor.scss index 84edf7146c5..7a98b97fd36 100644 --- a/src/BootstrapBlazor/Components/Table/Table.razor.scss +++ b/src/BootstrapBlazor/Components/Table/Table.razor.scss @@ -384,6 +384,10 @@ overflow: hidden; } +td > .table-cell { + overflow: hidden; +} + .table tbody td .table-cell:not(.is-wrap) { white-space: nowrap; } @@ -555,10 +559,6 @@ tr.active:not(.is-edit):hover { pointer-events: none; } -.table-fixed-column .table .fixed-right { - border-right: inherit; -} - .table-fixed-column .table .fixed-right.fl { border-left: 1px solid var(--bb-table-column-fixed-border-color); }