在树视图 Odoo 13 外添加按钮 [英] Adding Button outside Tree View Odoo 13

问题描述

美好的一天！

有没有办法在 Odoo 的树视图上方添加一个按钮?
每当用户单击按钮时，我想运行一个函数.
如果这是不可能的，你能帮我找到一个替代方案吗?

Is there a way to add a button above the Tree View in Odoo?
I would like to run a function whenever the User Clicks the button.
If this is not possible can you help me with an alternative?

这是我正在查看的代码:

here is my code on view:

'''<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <record id="account_payment_import_view_tree" model="ir.ui.view">
        <field name="name">account.payment.import.view.tree</field>
        <field name="model">account.payment.import</field>
        <field name="arch" type="xml">
            <tree string="Payment Imports" decoration-info="payment_id != False" decoration-danger="error_msg != False">
                <field name="transaction_date"/>
                <field name="facts_id"/>
                <field name="paid_in_lei"/>
                <field name="paid_in_euro"/>
                <field name="amount"/>
                <field name="account"/>
                <field name="account_no"/>
                <field name="document_no"/>
                <field name="details_bk_statement"/>
                <field name="error_msg"/>
                <field name="invoice_number" invisible="1"/>
                <field name="payment_id" widget="many2onebutton" invisible="1"/>
                <field name="invoice_id" widget="many2onebutton" invisible="1"/>
                <field name="company_id" invisible="1"/>
                <field name="currency_id" invisible="1"/>
            </tree>
        </field>
    </record>

    <record id="account_payment_import_action" model="ir.actions.act_window">
        <field name="name">Payment Imports</field>
        <field name="res_model">account.payment.import</field>
        <field name="view_mode">tree</field>
        <field name="domain">[]</field>
        <field name="context">{'edit': 0}</field>
    </record>

    <menuitem
        id="account_payment_import_menu"
        name="Payment Imports"
        action="account_payment_import_action"
        parent="account.menu_finance_receivables"
        sequence="160"/>
</odoo>''' 

推荐答案

好吧，这是我在树视图中获取按钮的尝试.我会一步一步为您解释清楚.

Well, here's my attempt to get the button in the tree view. I'll try to explain you well step by step.

首先我们必须通过qweb将按钮添加到树视图中，从web模块继承树视图.这将使我们的新按钮出现在我们不想要的所有树视图中.所以为了避免我们添加一个条件 t-if='widget.modelName == "account.payment.import"' 这将导致按钮只为模型是一个我们感兴趣的.我们还添加了一个 CSS 类 oe_new_custom_button 以便能够从 javascript 中识别按钮.

First we have to add the button to the tree view via qweb, inheriting the tree view from the web module. This will make our new button appear in all tree views, which we don't want. So to avoid that we add a condition t-if='widget.modelName == "account.payment.import"' which will cause the button to be generated only for the views whose model is the one that interests us. We also add a CSS class oe_new_custom_button to be able to identify the button from the javascript.

让我们调用包含此 qweb 的文件 tree_view_button.xml 并将其放在 your_module_name/static/src/xml 中.

Let's call the file that contains this qweb tree_view_button.xml and place it in your_module_name/static/src/xml.

<?xml version="1.0" encoding="UTF-8"?>

<templates>
    <t t-extend="ListView.buttons">
        <t t-jquery="div.o_list_buttons" t-operation="append">
            <button type="button" t-if='widget.modelName == "account.payment.import"'
                    class="oe_new_custom_button btn btn-primary">Custom Button
            </button>
        </t>
    </t>
</templates>

其次，我们必须为按钮提供功能，我们通过 javascript 实现这一点.

Second we must give functionality to the button, we achieve this through javascript.

这里我们继承了树视图控制器，称为 ListController，它的作用是渲染和绑定控制面板中所有额外的按钮/分页器等.

Here we inherit the tree view controller, called ListController, whose its role is to render and bind all extra buttons/pager in the control panel, among other things.

让我们调用包含此 javascript tree_view_button.js 的文件并将其放置在 your_module_name/static/src/js 中.

Let's call the file that contains this javascript tree_view_button.js and place it in your_module_name/static/src/js.

odoo.define('your_module_name.tree_view_button', function (require){
    "use strict";

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

    ListController.include({
        renderButtons: function($node) {
            this._super.apply(this, arguments);
            var self = this;
            if (this.$buttons) {
                $(this.$buttons).find('.oe_new_custom_button').on('click', function() {
                    //custom code
                });
            }
        },
    });
});

最后，我们将 javascript 添加到 odoo 资产并配置清单以接受我们所有的更改.

Finally, we add our javascript to the odoo assets and configure the manifest to take all our changes.

让我们调用包含资产的文件 assets.xml 并将其放在 your_module_name/views 中.

Let's call the file that contains the assets assets.xml and place it in your_module_name/views.

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <template id="assets_backend" name="your_module_name_assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/your_module_name/static/src/js/tree_view_button.js"></script>
            </xpath>
        </template>
    </data>
</odoo>

这就是 ma​​nifest.py 的样子.

And that's what it should look like manifest.py.

{
    'data': [
        [ ... ]
        'views/assets.xml',  # <- important
    ],
    "qweb": ['static/src/xml/*.xml'],  # <- important
}

我们已经拥有了一切，但是现在，javascript 还能做什么?

所有内容都有一点，但最重要的是以下内容.

We already have everything, but now, what can be done from javascript?

A little bit of everything, but the most important thing would be the following.

odoo.define('your_module_name.tree_view_button', function (require){
    "use strict";

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

    var rpc = require('web.rpc')

    ListController.include({
        renderButtons: function($node) {
            this._super.apply(this, arguments);
            var self = this;
            if (this.$buttons) {
                $(this.$buttons).find('.oe_new_custom_button').on('click', function() {
                    rpc.query({
                        model: 'account.payment.import',
                        method: 'some_method',
                        args: [],
                    }).then(function(res){
                        // console.log(res)
                        // self.reload();
                    })
                });
            }
        },
    });
});

args 的第一个参数是您希望出现在 some_method 的 self 变量中的 id 列表.

The first argument of args is a list of the ids you want to appear in the self variable of the some_method.

odoo.define('your_module_name.tree_view_button', function (require){
    "use strict";

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

    ListController.include({
        renderButtons: function($node) {
            this._super.apply(this, arguments);
            var self = this;
            if (this.$buttons) {
                $(this.$buttons).find('.oe_new_custom_button').on('click', function() {
                    self.do_action('model_name.action_id', {
                        additional_context: {},
                    });
                });
            }
        },
    });
});

additional_context 应该是，例如，

{
    'active_id': 1,
}

结束

就是这样，我希望它对你有用.我附上了按钮外观的图片.

The end

That's all, I hope it works for you. I attach an image of what the button would look like.

这篇关于在树视图 Odoo 13 外添加按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！