odoo 给form表单视图内联列表添加按钮

实践环境

Odoo 14.0-20221212 (Community Edition)

代码实现

模块文件组织结构

说明：为了更好的表达本文主题，一些和主题无关的文件、代码已略去

代码语言：javascript复制

odoo14customestate
│  __init__.py
│  __manifest__.py
│
├─models
│  estate_customer.py
│  estate_property_offer.py
│  __init__.py
│
├─static
│  │
│  └─src
│      └─xml
│             estate_customer_inline_tree_buttons.js
│
└─views
      estate_customer_views.xml
      webclient_templates.xml

测试模型定义

odoo14customestatemodelsestate_customer.py

代码语言：javascript复制

#!/usr/bin/env python
# -*- coding: utf-8 -*-


class EstateCustomer(models.Model):
    _name = 'estate.customer'
    _description = 'estate customer'

    name = fields.Char(required=True)
    age = fields.Integer()
    description = fields.Text()
    property_ids = fields.One2many("estate.property", "customer_id", string="Property")

odoo14customestatemodelsestate_property.py

代码语言：javascript复制

class EstateProperty(models.Model):
    _name = 'estate.property'
    _description = 'estate property'
    name = fields.Char()
    status = fields.Char()
    customer_id = fields.Many2one('estate.customer')

测试模型视图定义

odoo14customestateviewsestate_customer_views.xml

代码语言：javascript复制

<?xml version="1.0"?>
<odoo>
    <!--此处代码略-->
    <record id="estate_customer_view_form" model="ir.ui.view">
        <field name="name">estate.customer.form</field>
        <field name="model">estate.customer</field>
        <field name="arch" type="xml">
            <form>
                <sheet>
                    <group>
                        <field name="name" />
                        <field name="age"/>
                        <field name="property_ids" widget="my_field_one_2_many">
                            <tree>
                                <field name="name"/>
                                <field name="status"/>
                            </tree>
                        </field>
                    </group>
                </sheet>
            </form>
        </field>
    </record>
</odoo>

说明：<field name="property_ids" widget="my_field_one_2_many">，其中my_field_one_2_many为下文javascript中定义的组件，实现添加自定义按钮；

my_field_one_2_many 组件定义

js实现

为列表视图添加自定义按钮

odoo14customestatestaticsrcjsestate_customer_inline_tree_buttons.js

代码语言：javascript复制

odoo.define('estate.customer.fieldOne2Many', function (require) {
"use strict";
    var registry = require('web.field_registry');
    var FieldOne2Many = require('web.relational_fields').FieldOne2Many;
    var viewRegistry = require('web.view_registry');

    var MyFieldOne2Many = FieldOne2Many.extend({
        supportedFieldTypes: ['one2many'],
        events: _.extend({}, FieldOne2Many.prototype.events, {
            'click .o_button_upload_estate_customer': '_on_your_button_clicked'
        }),

        // 重写渲染按钮函数，添加按钮
        _renderButtons: function () {
             this._super.apply(this, arguments);
             this.$buttons = $('<button type="button" class="btn btn-primary o_button_upload_estate_customer">CustomButton</button>');
        },

        _on_your_button_clicked(){
            console.log('button clicked');
        },
    });

    registry.add('my_field_one_2_many', MyFieldOne2Many)
});

加载js脚本xml文件定义

odoo14customestateviewswebclient_templates.xml

代码语言：javascript复制

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="assets_common" inherit_id="web.assets_common" name="Backend Assets (used in backend interface)">
         <xpath expr="//script[last()]" position="after">
             <script type="text/javascript" src="/estate/static/src/js/estate_customer_inline_tree_buttons.js"></script>
        </xpath>
    </template>
</odoo>

最终效果

xml python 腾讯云测试服务

0 人点赞