引言
在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;
}
工作原理详解
1. 模板扩展机制
Odoo使用QWeb模板引擎，通过t-extend和t-jquery指令，我们可以扩展现有模板。在这个例子中，我们扩展了ListView.buttons模板，并在o_list_buttons容器中添加了自定义按钮。
2. 条件渲染
通过t-if指令，我们可以根据条件决定是否渲染按钮。在这个例子中，只有当模型为custom.model.name且视图名称为custom view name identifier时，才会显示按钮。
3. 权限控制
通过groups属性，我们可以控制哪些用户组能够看到按钮。在这个例子中，只有属于custom_module.custom_group_name组的用户才能看到按钮。
4. 事件绑定
在JavaScript代码中，我们通过this.$buttons.find('.custom_action_button_class').click(...)绑定点击事件。当用户点击按钮时，会调用create_new_project_base_info方法。
5. 后端交互
通过Model对象，我们可以调用后端Python方法。在这个例子中，我们调用了custom.model.name模型的create_new_project_base_info方法。
6. 动作执行
根据后端返回的数据，我们构建了一个动作对象，并通过do_action方法执行。这会打开一个新的表单视图，用于创建项目。
7. 视图刷新
通过on_close回调，我们可以在表单关闭后刷新列表视图，以便显示最新数据。
完整流程
- 用户打开
project.info模型的列表视图 - 系统加载自定义按钮模板和JavaScript代码
- 用户点击"创建"按钮
- 系统调用
create_new_project_base_info方法 - 后端处理请求并返回结果
- 前端根据结果打开表单视图
- 用户在表单中输入数据并保存
- 表单关闭后，列表视图自动刷新
总结
通过以上步骤，我们成功地在Odoo的Tree视图中添加了自定义按钮，并将其与后端方法关联起来。这种方式非常灵活，可以用于实现各种业务需求，如批量处理、数据导入导出、状态更新等。
在实际开发中，我们可以根据需要调整按钮的样式、位置和行为，以提供更好的用户体验。同时，我们也可以通过权限控制，确保只有特定用户才能执行特定操作，从而保障系统安全。
