如何用JS在Odoo 17的动作锯齿图标内添加按钮？（hr.employee树视图）

我在第一个红框中有一个按钮，希望将其放入锯轮图标（动作菜单）中，请问该如何编写JS代码实现？当前处于hr.employee模型的树视图中。

实现方案 #

1. 核心思路 #

通过继承Odoo的ListController组件，重写动作菜单的生成方法，将目标按钮添加到锯轮下拉菜单中，同时移除原顶部按钮的显示。

2. JS代码实现 #

创建自定义JS文件，扩展树视图控制器：

odoo.define('hr_employee_custom.action_menu_extend', function (require) {
    "use strict";

    const ListController = require('web.ListController');
    const viewRegistry = require('web.view_registry');
    const ListView = require('web.ListView');

    // 自定义员工树视图控制器
    const EmployeeListController = ListController.extend({
        // 重写动作菜单生成方法
        _getActionMenuItems: function () {
            // 先获取原有菜单项
            const menuItems = this._super(...arguments);
            
            // 添加自定义按钮到动作菜单
            menuItems.items.push({
                label: '你的按钮名称', // 替换为实际按钮文本
                callback: this._onCustomButtonClick.bind(this),
                icon: 'fa fa-check', // 可选：设置按钮图标，使用Font Awesome类
            });
            
            return menuItems;
        },

        // 自定义按钮点击事件处理
        _onCustomButtonClick: function () {
            // 获取选中的记录ID
            const selectedIds = this.getSelectedIds();
            if (selectedIds.length === 0) {
                this.displayNotification({
                    type: 'warning',
                    message: '请先选择至少一个员工'
                });
                return;
            }

            // 调用后台业务方法（示例）
            this._rpc({
                model: 'hr.employee',
                method: 'your_custom_method', // 替换为实际后台方法名
                args: [selectedIds],
            }).then(() => {
                this.displayNotification({
                    type: 'success',
                    message: '操作完成'
                });
                // 刷新视图
                this.reload();
            }).catch(() => {
                this.displayNotification({
                    type: 'danger',
                    message: '操作失败，请重试'
                });
            });
        },
    });

    // 绑定自定义控制器到ListView
    const EmployeeListView = ListView.extend({
        config: _.extend({}, ListView.prototype.config, {
            Controller: EmployeeListController,
        }),
    });

    // 注册自定义视图，仅对hr.employee树视图生效
    viewRegistry.add('hr_employee_custom_tree', EmployeeListView);
});

3. 视图XML配置 #

修改hr.employee的树视图，指定使用自定义JS视图：

<record id="hr_employee_tree_view" model="ir.ui.view">
    <field name="name">hr.employee.tree.view</field>
    <field name="model">hr.employee</field>
    <field name="arch" type="xml">
        <tree js_class="hr_employee_custom_tree">
            <!-- 原有树视图字段保持不变 -->
            <field name="name"/>
            <field name="work_email"/>
            <field name="department_id"/>
            <!-- 其他字段... -->
        </tree>
    </field>
</record>

4. 收尾处理 #

• 若原顶部按钮是自定义XML按钮，直接删除对应<button>节点即可；
• 若为系统自带按钮，可通过XML的position="attributes"添加invisible="1"隐藏；
• 确保后台模型hr.employee中已定义对应业务方法，并配置好权限。

内容的提问来源于stack exchange，提问作者Cris Tuan