test/jikimo_frontend/static/src/list/custom_width.js

/** @odoo-module */

import {patch} from '@web/core/utils/patch';
import {ListRenderer} from "@web/views/list/list_renderer"

// var {patch} = require("web.utils") 这句话也行

patch(ListRenderer.prototype, 'jikimo_frontend.ListRenderer', {
    // 你可以重写或者添加一些方法和属性
    // The following code manipulates the DOM directly to avoid having to wait for a
    // render + patch which would occur on the next frame and cause flickering.
    freezeColumnWidths() {
        if (!this.keepColumnWidths) {
            this.columnWidths = null;
        }

        const table = this.tableRef.el;
        const headers = [...table.querySelectorAll("thead th:not(.o_list_actions_header)")];
        // 列数+1
        const columnsLength = headers.length + 1;

        if (!this.columnWidths || !this.columnWidths.length) {
            // no column widths to restore
            // Set table layout auto and remove inline style to make sure that css
            // rules apply (e.g. fixed width of record selector)
            table.style.tableLayout = "auto";
            headers.forEach((th) => {
                th.style.width = null;
                th.style.maxWidth = null;
            });

            this.setDefaultColumnWidths(columnsLength);

            // Squeeze the table by applying a max-width on largest columns to
            // ensure that it doesn't overflow
            this.columnWidths = this.computeColumnWidthsFromContent();
            table.style.tableLayout = "fixed";
        }
        headers.forEach((th, index) => {
            if (!th.style.width) {
                th.style.width = `${Math.floor(this.columnWidths[index])}px`;
            }
        });
    },

    setDefaultColumnWidths(columnsLength) {
        const widths = this.state.columns.map((col) => this.calculateColumnWidth(col));
        const sumOfRelativeWidths = widths
            .filter(({ type }) => type === "relative")
            .reduce((sum, { value }) => sum + value, 0);

        // // 计算新增列的权重
        // const newColumnWeight = 0.1;
        //
        // // 新增列后的总权重
        // const totalWeights = sumOfRelativeWidths + newColumnWeight;

        // 1 because nth-child selectors are 1-indexed, 2 when the first column contains
        // the checkboxes to select records.
        const columnOffset = this.hasSelectors ? 2 : 1;
        // widths.forEach(({ type, value }, i) => {
        //     const headerEl = this.tableRef.el.querySelector(`th:nth-child(${i + columnOffset})`);
        //     if (type === "absolute") {
        //         if (this.isEmpty) {
        //             headerEl.style.width = value;
        //         } else {
        //             headerEl.style.minWidth = value;
        //         }
        //     } else if (type === "relative" && this.isEmpty) {
        //         // headerEl.style.width = `${((value / sumOfRelativeWidths) * 100).toFixed(2)}%`;
        //         headerEl.style.width = `${100 / columnsLength}%`;
        //     }
        // });

        // widths.forEach(({ type, value }, i) => {
        //     const headerEl = this.tableRef.el.querySelector(`th:nth-child(${i + columnOffset})`);
        //     if (type === "absolute") {
        //         if (this.isEmpty) {
        //             headerEl.style.width = value;
        //         } else {
        //             headerEl.style.minWidth = value;
        //         }
        //     } else if (type === "relative" && this.isEmpty) {
        //
        //       if (i === 0) {
        //       // 第一列
        //       headerEl.style.width = `3.2%`;
        //
        //       } else {
        //       headerEl.style.width = `${100 / columnsLength}%`;
        //       }
        //
        //     }
        //
        // });

        widths.forEach(({ type, value }, i) => {
            const headerEl = this.tableRef.el.querySelector(`th:nth-child(${i + columnOffset})`);
            const column = this.state.columns[i]; // 获取当前列的对象
            if (type === "absolute") {
                if (this.isEmpty) {
                    headerEl.style.width = value;
                } else {
                    headerEl.style.minWidth = value;
                }
            } else if (type === "relative" && this.isEmpty) {

              if (i === 0) {
              // 第一列
                  headerEl.style.width = `${1}%`;
              } else if (column.name === "sequence") {
              // sequence列
                  headerEl.style.width = `${1}%`;
              } else if (column.name === "name") {
              // name列
              headerEl.style.width = `${20}%`;

              } else {
              headerEl.style.width = `${100 / columnsLength}%`;
              }

            } else {
                headerEl.style.width = `${100 / columnsLength}%`;
            }

        });






        // widths.forEach(({type, value}, i) => {
        //
        //       const headerEl = this.tableRef.el.querySelector(`th:nth-child(${i + columnOffset})`);
        //
        //       if (type === 'absolute') {
        //       // 原有绝对宽度逻辑
        //       } else if (type === 'relative' && this.isEmpty) {
        //
        //       if (i === columnsLength - 1) {
        //         // 新增列按权重分配
        //         headerEl.style.width = `${(newColumnWeight/totalWeights) * 100}%`;
        //
        //       } else {
        //         // 原相对列按权重分配
        //         headerEl.style.width = `${(value/totalWeights) * 100}%`;
        //       }
        //
        //       }
        //
        //     });
    },
    // calculateColumnWidth(column) {
    //     if (column.options && column.rawAttrs.width) {
    //         return { type: "absolute", value: column.rawAttrs.width };
    //     }
    //
    //     if (column.type !== "field") {
    //         return { type: "relative", value: 1 };
    //     }
    //
    //     const type = column.widget || this.props.list.fields[column.name].type;
    //     if (type in FIXED_FIELD_COLUMN_WIDTHS) {
    //         return { type: "absolute", value: FIXED_FIELD_COLUMN_WIDTHS[type] };
    //     }
    //
    //     return { type: "relative", value: 1 };
    // }

}
);