ListView扩展

Note

对ListView做一些改造，以实现更多的功能。

--odoo version: 16

在<Field/>标签设置标题行class

通过在<field/>标签内设置options属性对应thClassNames为key的值，向list表格的标题行添加class。

/** @odoo-module **/
import { ListRenderer } from "@web/views/list/list_renderer";
import { patch } from "@web/core/utils/patch";

patch(ListRenderer.prototype, "ListRenderer.patch.addHeaderClass", {
    getColumnClass(column){
        const classNamesString = this._super(column);
        const classNames = classNamesString.split(" ");
        if (column.options && column.options.thClassNames){
            classNames.push(...column.options.thClassNames.split(" "));
        }
        return classNames.join(" ");
    },
});

使用示例

<field name="project_id" options="{'thClassNames': "text-primary text-end"}" />

双击打开视图

通过修改listRenderer，实现双击列表记录的事件。

💡单击跳转视图

单击跳转视图可以查阅文档

以下为js_class方式实现，可根据需要修改为patch。

/** @odoo-module **/

import { useService } from "@web/core/utils/hooks";
import { registry } from "@web/core/registry";
import { ListRenderer } from "@web/views/list/list_renderer";
import { listView } from "@web/views/list/list_view";

class ListDoubleClickDoAction extends ListRenderer {
    setup(){
        super.setup();
        this.action = useService("action");
        this.orm = useService("orm");
    }

    async onDoubleClicked(record, ev){
        try{
            const action = this.orm.call(record.resModel, "custom_double_click_action", [record.resId]);
            await this.action.doAction(action);
        } catch (e) {
            console.log('list double click error: ', e);
        }
    }
}
ListDoubleClickDoAction.recordRowTemplate = "ListDoubleClickDoAction.RecordRow";

const ListDoubleClickDoActionView = {
    ...listView,
    Renderer: ListDoubleClickDoAction,
}

registry.category("views").add('list_double_click_doaction', ListDoubleClickDoActionView);

<?xml version="1.0" encoding="UTF-8" ?>
<templates xml:space="preserve">

    <t t-name="my.ListDoubleClickDoAction.RecordRow" t-inherit="web.ListRenderer.RecordRow" t-inherit-mode="primary" owl="1">
        <xpath expr="//tr[hasclass('o_data_row')]//td[hasclass('o_data_cell')]" position="attributes">
            <attribute name="t-on-dblclick">(ev) => this.onDoubleClicked(record, ev)</attribute>
        </xpath>
    </t>

</templates>