当前位置：首页 > news >正文

Odoo Tree视图增加自定义按钮并执行方法的详细解析

news 来源：原创 2025/6/16 6:46:39

引言

在Odoo开发中，我们经常需要在列表视图（Tree视图）中添加自定义按钮，以便用户可以快速执行特定操作。本文将详细解析如何在Odoo的Tree视图中添加自定义按钮，并将其与后端方法关联起来，以实现特定的业务逻辑。

实现步骤

1. XML模板定义

首先，我们需要创建一个XML模板文件，用于定义自定义按钮：

<?xml version="1.0" encoding="UTF-8"?>
<templates id="custom_action_button_template" xml:space="preserve">
    <t t-extend="ListView.buttons">
        <t t-jquery="div.o_list_buttons" t-operation="append">
            <t t-if="widget.model=='custom.model.name' and widget.fields_view.name=='custom view name identifier'">
                <button class="btn btn-primary custom_action_button_class" type="button"
                        groups="custom_module.custom_group_name">创建</button>
            </t>
        </t>
    </t>
</templates>

这段代码的关键点：

t-extend="ListView.buttons": 扩展Odoo标准的ListView按钮模板
t-jquery="div.o_list_buttons" t-operation="append": 使用jQuery选择器找到按钮容器，并在其中追加内容
t-if="widget.model=='project.info' and widget.fields_view.name=='project info tree button control'": 条件判断，只在特定模型和视图名称下显示按钮
groups="custom_module.custom_group_name": 权限控制，只有特定用户组才能看到此按钮

2. JavaScript实现

接下来，我们需要编写JavaScript代码来处理按钮点击事件：

odoo.define('custom_module.custom_action_button', function (require) {
    "use strict";
    var core = require('web.core');
    var ListView = require('web.ListView');
    var QWeb = core.qweb;
    var Model = require('web.Model');

    ListView.include({
        render_buttons: function ($node) {
            var self = this;
            this._super($node);
            console.log('this.modelName::::::::::', this.fields_view)
            this.$buttons.find('.custom_action_button_class')
                .click(this.proxy('create_new_custom_record'));
        },

        create_new_custom_record: function () {
            var self = this;
            var custom_model = new Model('custom.model.name');
            custom_model.call('create_new_custom_record').then(function (res) {
                console.log("按钮执行完毕：", res);
                let action = {
                    name: "创建记录",
                    res_model: res.res_model,
                    view_mode: 'form',
                    view_type: 'form',
                    type: 'ir.actions.act_window',
                    views: [[res.view_id, 'form']],
                    target: 'new',
                };
                console.log("构建执行完毕：", action);
                self.do_action(action, {
                    on_close: function () {
                        self.reload();
                    }
                });
            });
        }
    });
});

这段代码的关键点：

odoo.define: 定义一个新的Odoo模块
ListView.include: 扩展Odoo的ListView组件
render_buttons: 重写按钮渲染方法，绑定点击事件
create_new_project_base_info: 自定义方法，处理按钮点击逻辑
wx_user_model.call('create_new_project_base_info'): 调用后端Python方法
self.do_action(action, {...}): 执行动作，打开表单视图
on_close: function () { self.reload(); }: 表单关闭后刷新列表视图

3. CSS样式（可选）

为了美化按钮外观，我们可以添加CSS样式：

.Project_management {
    background: #f8f8f8;
    padding: 20px 0px;
    width: 18%;
    margin-left: 8px;
}

.Project_management:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
    background: #e9e7e7;
}

.Project_management:active:hover {
    background: #e9e7e7;
}

.ProjectManagementBox {
    display: flex;
    justify-content: space-between;
}