[odoo开发笔记]odoo 15&16 Tree视图添加按钮

odoo在15及之后版本产生js引用变更，导致14及之前列表视图（Tree/List）添加自定义按钮的方式产生了变化。

目前15/16版本列表视图添加按钮有三种方式

1.每个明细行上都显示按钮

此种Tree视图添加按钮仅需要定位第一个字段，添加button即可

创建xml文件（例如sale_view.xml）

写入以下内容

<?xml version="1.0" encoding="UTF-8"?> <odoo> <data> <record id="sale_order_inherited_tree_view" model="ir.ui.view"> <field name="name">sale.order.view.tree.inherit</field> <field name="model">sale.order</field> <field name="inherit_id" ref="sale.view_quotation_tree"/> <field name="arch" type="xml"> <xpath expr="//tree/field[@name='name']" position="before"> <button name="%(action_sale_wizards)d" string="弹出向导" class="oe_highlight" type="action"/> </xpath> </field> </record> </data> </odoo>

2.选中列表明细后，显示按钮，不选中按钮不显示（系统版本更新后自带机制）

此种Tree视图添加按钮可针对于选中明细行进行操作处理

创建xml文件（例如sale_view.xml）

写入以下内容

<?xml version="1.0" encoding="UTF-8"?> <odoo> <data> <record id="sale_order_inherited_tree_view" model="ir.ui.view"> <field name="name">sale.order.view.tree.inherit</field> <field name="model">sale.order</field> <field name="inherit_id" ref="sale.view_quotation_tree"/> <field name="arch" type="xml"> <xpath expr="//tree/field[@name='name']" position="before"> <header> <button name="%(action_sale_wizards)d" string="弹出向导" class="oe_highlight" type="action"/> </header> </xpath> </field> </record> </data> </odoo>

注：以上两种均需将sale_view.xml添加至__manifest__.py文件中data内

'data': [ 'views/sale_view.xml', ],

3.将按钮添加至创建按钮后面，需要写js文件来进行处理，仅通过xml无法实现

效果图如下

第一步，创建static/src/js/tree_button.js

写入以下内容

odoo.define('button_near_create.tree_button', function (require) { "use strict"; var ListController = require('web.ListController'); var ListView = require('web.ListView'); var viewRegistry = require('web.view_registry'); var TreeButton = ListController.extend({ buttons_template: 'button_near_create.buttons', events: _.extend({}, ListController.prototype.events, { 'click .open_wizard_action': '_OpenWizard', }), _OpenWizard: function () { var self = this; this.do_action({ type: 'ir.actions.act_window', res_model: 'test.wizard', name :'Open Wizard', view_mode: 'form', view_type: 'form', views: [[false, 'form']], target: 'new', res_id: false, }); } }); var SaleOrderListView = ListView.extend({ config: _.extend({}, ListView.prototype.config, { Controller: TreeButton, }), }); viewRegistry.add('button_in_tree', SaleOrderListView); });

第二步，创建static/src/xml/tree_button.xml

写入以下内容

<?xml version="1.0" encoding="UTF-8"?> <templates> <t t-extend="ListView.buttons" t-name="button_near_create.buttons"> <t t-jquery="button.o_list_button_add" t-operation="after"> <button type="button" class="btn btn-primary open_wizard_action"> 弹出向导 </button> </t> </t> </templates>

第三步，也是最关键一步，15版本以前需要在views文件夹下创建assets.xml或templates.xml引用js文件，但是在15以及15以后版本不需要这样操作了。

需要在__manifest__.py文件中写入

'assets': { 'web.assets_backend': [ 'button_near_create/static/src/js/tree_button.js', ], 'web.assets_qweb': [ 'button_near_create/static/src/xml/tree_button.xml', ], },

第四步，在对应的tree视图添加js属性，创建sale_view.xml

<?xml version="1.0" encoding="UTF-8"?> <odoo> <data> <record id="sale_order_inherited_tree_view" model="ir.ui.view"> <field name="name">sale.order.view.tree.inherit</field> <field name="model">sale.order</field> <field name="inherit_id" ref="sale.view_quotation_tree"/> <field name="arch" type="xml"> <xpath expr="//tree" position="attributes"> <attribute name="js_class">button_in_tree</attribute> </xpath> </field> </record> </data> </odoo>

重启，升级模块 页面即可生效