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表格列表内部自定义按钮
428 0
fastadmin表格列表内部自定义按钮
|
JavaScript 索引
【vue】element ui 实现动态表单点击按钮新增行/删除行
【vue】element ui 实现动态表单点击按钮新增行/删除行
3447 0
|
JavaScript
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
2151 0
VUE element-ui之el-form表单点击按钮自动增加表单(输入框),可新增删除
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
JSON JavaScript 数据库
vue搜索表格功能,根据input输入框和下拉框传递的参数进行搜索
vue搜索表格功能,根据input输入框和下拉框传递的参数进行搜索
132 1
|
JavaScript
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
1721 0
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
|
JavaScript
JQuery 获取选中多选框的value,合并成字符串传给后台
JQuery 获取选中多选框的value,合并成字符串传给后台
52 0
|
JavaScript 前端开发
JQuery 获取选中多选框的value,合并成数组传给后台
JQuery 获取选中多选框的value,合并成数组传给后台
43 0
odoo 为form表单视图添加chatter功能
odoo 为form表单视图添加chatter功能
171 0
|
JavaScript 前端开发
odoo 通过Javascript显示或隐藏form自带按钮
odoo 通过Javascript显示或隐藏form自带按钮
160 0

热门文章

最新文章