Odoo在tree view左上角添加自定义按钮并绑定事件

前言：

在odoo的tree view左上角定义一个类似“创建”的按钮，实现点击弹出一个form 表单，输入搜索条件后，后端搜索出相应的数据，并以另一个tree view的形式展示。

少说废话，先看东西（罗氏发言）。

实现步骤：

1. 创建自定义的button，为button指定一个qweb的模版名称。
2. 在js文件将此button加入到odoo的“web.ListController”，并绑定一个事件（我这里绑定的是弹出框）
3. 将2中的ListController对象加入到odoo的“web.ListView”中，然后在"web.view_registry"中注册这个事件，并指定一个名字（假设叫name_A）
4. 引入2，3步骤里的js文件
5. 在你要加自定义button的视图上加参数 **js-class=“name_A”**就可以了 （打完收工）

文件目录

一共包含5个文件，还有2个跟功能介绍关系不大的（后端业务处理的python文件和弹出框的Form表单定义）的就不放了。

具体代码

1. 创建button （product_search_button.xml）

<?xml version="1.0" encoding="utf-8"?>
<templates id="template" xml:space="preserve">

<button t-name="ProductSearch.Buttons" class="btn btn-primary" type="button">
    搜索关联店铺
</button>

</templates>

2. 加入web.ListController （product_search_rel_eshop_list_controller.js）

odoo.define('product.ProductSearchRelEshopListController', function (require) {
    
    
"use strict";

var core = require('web.core');
var ListController = require('web.ListController');

var qweb = core.qweb;


var ProductSearchRelEshopListController = ListController.extend({
    
    

    init: function (parent, model, renderer, params) {
    
    
        this.context = renderer.state.getContext();
        return this._super.apply(this, arguments);
    },

    renderButtons: function ($node) {
    
    
        this._super.apply(this, arguments);
        if (this.context.no_at_date) {
    
    
            return;
        }
        var $buttonToDate = $(qweb.render('ProductSearch.Buttons'));
        $buttonToDate.on('click', this._onOpenWizard.bind(this));

        $buttonToDate.prependTo($node.find('.o_list_buttons'));

        
    },

    // -------------------------------------------------------------------------
    // Handlers
    // -------------------------------------------------------------------------
	// 给按钮绑定一个弹出form表单的动作
    _onOpenWizard: function () {
    
    
        var state = this.model.get(this.handle, {
    
    raw: true});
        var stateContext = state.getContext();
        var context = {
    
    
            active_model: this.modelName,
        };
        this.do_action({
    
    
            res_model: 'hgx.product.search.rel.eshops',
            views: [[false, 'form']],
            target: 'new',
            type: 'ir.actions.act_window',
            context: context,
        });
    },
});

return ProductSearchRelEshopListController;

});

3. 加入web.ListView （product_search_rel_eshop_list_view.js）

odoo.define('product.ProductSearchRelEshopListView', function (require) {
    
    
    "use strict";

    var ListView = require('web.ListView');
    var ProductSearchRelEshopListController = require('product.ProductSearchRelEshopListController');
    var viewRegistry = require('web.view_registry');

    var ProductSearchRelEshopListView = ListView.extend({
    
    
        config: _.extend({
    
    }, ListView.prototype.config, {
    
    
            Controller: ProductSearchRelEshopListController,
        }),
    });

    viewRegistry.add('product_search_rel_eshop_list', ProductSearchRelEshopListView);

    return ProductSearchRelEshopListView;

});

4. 引用js文件 （product_search.xml）

<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <data>
        <template id="product_search_assets_backend" name="product_search_assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/odoo_huaguoxian_eshop/static/src/js/product_search_rel_eshop_list_controller.js"></script>
                <script type="text/javascript" src="/odoo_huaguoxian_eshop/static/src/js/product_search_rel_eshop_list_view.js"></script>
            </xpath>
        </template>

        <record id="view_hgx_product_search_rel_eshops" model="ir.ui.view">
            <field name="name">通过商品搜索关联店铺</field>
            <field name="model">hgx.product.search.rel.eshops</field>
            <field name="arch" type="xml">
                <form string="Choose your product">
                    <group>
                        <field name="product_name"/>
                    </group>
                    <footer>
                        <button name="search_rel_eshops" string="确认" type="object" class="btn-primary"/>
                        <button string="取消" class="btn-secondary" special="cancel" />
                    </footer>
                </form>
            </field>
        </record>

    </data>

</odoo>

5. 在视图上加上button （hgx_product_search_rel_eshop.xml）
   这里主要是隐藏其他按钮，并添加自定义的按钮

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <!-- 门店商品 -->
        <record id="view_product_search_rel_eshop_tree" model="ir.ui.view">
            <field name="name">美团外卖店铺</field>
            <field name="model">hgx.eshop</field>
            <field name="arch" type="xml">
                <tree string="product_rel_eshops" create="0" delete="0" export_xlsx="0" js_class="product_search_rel_eshop_list">
                    <field name="name" />
                    <field name="city_group_id" />
                    <field name="app_poi_code" />
                    <field name="is_online" />
                </tree>
            </field>
        </record>
        
        <record model="ir.actions.act_window" id="view_product_search_rel_eshops_action">
            <field name="name">美团网店商品</field> 
            <field name="res_model">hgx.eshop</field>
            <field name="type">ir.actions.act_window</field>
            <field name="domain">[('id','=','-1')]</field>
            <field name="view_mode">tree</field>
            <field name="view_id" ref="view_product_search_rel_eshop_tree"/>
        </record>
    </data>
</odoo>

其他

1. 常规的在__init__.py ，__ manifest __.py 中添加py文件和xml文件还是要的
2. 如果有写得不清晰的，可以加QQ：614596519 交流讨论
3. 请求一个 一键三连 ，不要下次一定，答应我好吗。