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

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

实践环境

Odoo 14.0-20221212 (Community Edition)

代码实现

模块文件组织结构

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

odoo14\custom\estate
│  __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

测试模型定义

odoo14\custom\estate\models\estate_customer.py

#!/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")

odoo14\custom\estate\models\estate_property.py

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

测试模型视图定义

odoo14\custom\estate\views\estate_customer_views.xml

<?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实现

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

odoo14\custom\estate\static\src\js\estate_customer_inline_tree_buttons.js

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文件定义

odoo14\custom\estate\views\webclient_templates.xml

<?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>

最终效果

目录
相关文章
|
JavaScript
fastadmin表格列表内部自定义按钮
fastadmin表格列表内部自定义按钮
384 0
fastadmin表格列表内部自定义按钮
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
585 0
|
JavaScript 索引
【vue】element ui 实现动态表单点击按钮新增行/删除行
【vue】element ui 实现动态表单点击按钮新增行/删除行
3424 0
|
4月前
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
460 0
|
6月前
|
前端开发
Element常用组件—表格、表单、对话框和分页工具条
Element常用组件—表格、表单、对话框和分页工具条
91 0
点击添加按钮弹框动态添加内容并且拼接在页面
点击添加按钮弹框动态添加内容并且拼接在页面
33 0
|
JavaScript
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
1684 0
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
|
JavaScript 前端开发
JS实现分页功能(单选按钮、全选按钮、跳转页面)
JS实现分页功能(单选按钮、全选按钮、跳转页面)
103 0
uniapp u-tabs表单如何默认选中
uniapp u-tabs表单如何默认选中
497 0
|
前端开发 数据库
通过ajax调用数据字典数据动态添加到网页下拉列表
通过ajax调用数据字典数据动态添加到网页下拉列表