Merge branch 'dev' into dev_zhou

This commit is contained in:
zhou
2025-05-18 21:27:33 +08:00
6 changed files with 180 additions and 2 deletions
@@ -1,7 +1,7 @@
.sticky-column {
position: sticky !important;
background-color: white;
z-index: 2;
z-index: 4 !important;
}
.o_list_view .o_list_table td.sticky-column {
z-index: 4 !important;
+5 -1
View File
@@ -57,7 +57,7 @@
"license": "OPL-1",
"price": 95.00,
"currency": "USD",
"depends": ["web", "sale_management"],
"depends": ["web", "sale_management", "account", "purchase", "hr_expense"],
"data": [],
"assets": {
"web.assets_backend": [
@@ -65,8 +65,12 @@
"tree_view_advanced_filter/static/src/libs/**/*",
"tree_view_advanced_filter/static/src/tree_view_advanced_filter/**/*",
"tree_view_advanced_filter/static/src/web_list_num/**/*",
"tree_view_advanced_filter/static/src/list_view_sticky_header_and_column/js/*",
"tree_view_advanced_filter/static/src/list_view_sticky_header_and_column/xml/*",
"tree_view_advanced_filter/static/src/list_view_sticky_header_and_column/scss/*"
]
},
"images": ["static/description/banner.jpg"],
"installable": True,
"auto_install": False,
@@ -0,0 +1,65 @@
/** @odoo-module **/
/** This file will used to stick the selected header and column in the list view **/
import { patch } from "@web/core/utils/patch";
import { ListRenderer } from "@web/views/list/list_renderer";
patch(ListRenderer.prototype, {
/** super the setup function **/
setup() {
super.setup();
},
/**
* function defining the button having t-on-click _onClick
*/
_onClickIcon(ev, record) {
ev.preventDefault();
ev.stopPropagation()
const $clickedHeader = $(ev.currentTarget).closest('th');
const columnIndex = $clickedHeader.index();
console.log(this.__owl__.bdom.parentEl)
$(this.__owl__.bdom.parentEl.querySelectorAll('.sticky-column')).removeClass('sticky-column');
console.log($(this.__owl__.bdom.parentEl.querySelectorAll('.sticky-column')).removeClass('sticky-column'))
$(this.__owl__.bdom.parentEl.querySelectorAll('.clicked-header')).removeClass('clicked-header');
$clickedHeader.addClass('clicked-header');
const $tableHeaders = $(this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table th'));
const $tableRows = $(this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table tr'));
const $tfootRow = $(this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table tfoot tr')[0].children);
const $selectedFooterCells = $tfootRow.filter(`td:nth-child(-n+${columnIndex + 1})`);
$selectedFooterCells.addClass('sticky-column');
const $selectedSearchTds = $(this.__owl__.bdom.parentEl.querySelectorAll(`.search_td:nth-child(-n+${columnIndex + 1})`));
$selectedSearchTds.removeClass('sticky-column').css('left', '');
$selectedSearchTds.addClass('sticky-column');
const $selectedColumns = $(this.__owl__.bdom.parentEl.querySelectorAll(`.o_data_row td:nth-child(-n+${columnIndex + 1})`));
const $selectedHeaderCells = $tableHeaders.filter(`th:nth-child(-n+${columnIndex + 1})`);
$tableHeaders.removeClass('sticky-column').css('left', '');
$(this.__owl__.bdom.parentEl.querySelectorAll('.o_data_row td')).removeClass('sticky-column').css('left', '');
$selectedColumns.addClass('sticky-column');
$selectedHeaderCells.addClass('sticky-column');
$tableHeaders.filter('.sticky-column').css('top', '0');
const $targetColumn = $selectedColumns.eq(columnIndex);
// const targetLeftPosition = $targetColumn.position().left;
const columnsToAdjust = columnIndex + 1;
$tableRows.each(function (index, row) {
const $headerCells = $(row).find('th');
const $rowCells = $(row).find('td');
for (let i = 0; i < columnsToAdjust; i++) {
if ($headerCells.eq(i).length > 0) {
$headerCells.eq(i).css('left', `${$headerCells.eq(i).position().left}px`);
}
if ($rowCells.eq(i).length > 0) {
$rowCells.eq(i).css('left', `${$rowCells.eq(i).position().left}px`);
}
}
});
},
/**
* super onClickSortColumn function and remove the icon and element having the class sticky-column
*/
onClickSortColumn(column) {
super.onClickSortColumn(...arguments);
$(this.__owl__.bdom.parentEl.querySelectorAll('.sticky-column')).removeClass('sticky-column');
$(this.__owl__.bdom.parentEl.querySelectorAll('.clicked-header')).removeClass('clicked-header');
const $tableHeaders = $(this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table th'));
$tableHeaders.removeClass('sticky-column').css('left', '');
}
});
@@ -0,0 +1,51 @@
.sticky-column {
position: sticky !important;
background-color: white;
z-index: 4 !important;
}
.o_list_view .o_list_table td.sticky-column {
z-index: 4 !important;
background-color: white;
}
.o_list_view .o_list_table thead {
position: sticky;
top: 0;
z-index: 3;
background-color: white;
}
.o_list_view .o_list_table th.sticky-column {
z-index: 4;
background-color: white;
}
.o_account_reports_page .table-responsive {
overflow-x: auto;
overflow-y: visible;
}
.table-responsive {
overflow: visible;
}
.o_list_view .table-responsive .table thead {
z-index: 5;
}
.o_list_renderer .o_list_table thead {
position: sticky;
top: 0;
z-index: 6;
}
th.sticky-column::before {
content: "";
position: absolute;
width: 5px;
height: 100%;
background: white;
top: 0;
left: -4px;
}
.fa-thumb-tack {
display: none;
}
th:hover .fa-thumb-tack,
th.clicked-header .fa-thumb-tack {
display: block;
}
@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<!--Adding the icon in purchase -->
<t t-name="sticky_header_and_column_in_list_view.PurchaseListRender"
t-inherit="purchase.PurchaseListView"
t-inherit-mode="extension" owl="1">
<xpath expr="//div[hasclass('o_list_renderer')]/table/thead/tr/t/th/t/div/span"
position="after">
<i class="fa fa-thumb-tack"
style="color: #27ae60; font-size: 16px; margin-right: 5px;"
t-on-click="(ev) => this._onClickIcon(ev,record)"/>
</xpath>
</t>
<!--Adding the icon in account -->
<t t-name="sticky_header_ and_column_in_list_view.AccountListRender"
t-inherit="account.ListRenderer" t-inherit-mode="extension"
owl="1">
<xpath expr="//div[hasclass('o_list_renderer')]/table/thead/tr/t/th/t/div/span"
position="after">
<i class="fa fa-thumb-tack"
style="color: #27ae60; font-size: 16px; margin-right: 5px;"
t-on-click="(ev) => this._onClickIcon(ev,record)"/>
</xpath>
</t>
<!--Adding the icon in Hr Expense -->
<t t-name="sticky_header_and_column_in_list_view.HrExpenseListRender"
t-inherit="hr_expense.DashboardListRenderer"
t-inherit-mode="extension" owl="1">
<xpath expr="//div[hasclass('o_list_renderer')]/table/thead/tr/t/th/t/div/span"
position="after">
<i class="fa fa-thumb-tack"
style="color: #27ae60; font-size: 16px; margin-right: 5px;"
t-on-click="(ev) => this._onClickIcon(ev,record)"/>
</xpath>
</t>
<!--Adding the icon in All-->
<t t-name="sticky_header_and_column_in_list_view.RowListView"
t-inherit="web.ListRenderer" t-inherit-mode="extension"
owl="1">
<xpath expr="//div[hasclass('o_list_renderer')]/table/thead/tr/t/th/t/div/span"
position="after">
<i class="fa fa-thumb-tack"
style="color: #27ae60; font-size: 16px; margin-right: 5px;"
t-on-click="(ev) => this._onClickIcon(ev,record)"
/>
</xpath>
</t>
</templates>
@@ -10,3 +10,12 @@
text-overflow: clip !important; // 移除省略号(或直接不设置)
min-width: max-content !important; // 按内容撑开列宽(可选)
}
.o_list_renderer .o_list_table{
table-layout: auto !important;
}
.o_list_renderer .o_list_table > thead > tr > th{
max-width: max-content !important;
}