odoo13 tree视图增加按钮

之前写过一遍oooo10版本的增加按钮方法,在odoo13中已经不太适用,现在更新一下在13版本中增加按钮的方法,方法其实都大同小异,直接上代码

• xml:qweb设置按钮模板

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

<templates>
    <t t-name="add_tree_button.product_test_button">
        <!--前两个class用于设置button样式 固定写法,最后一个需设置一个唯一值用于绑定事件-->
        <button type="button" class="btn btn-primary o_product_test_button">
            测试tree按钮
        </button>
    </t>
</templates>

这个xml需要在manifest中写入qweb项才会生效

• js:设置按钮的逻辑方法

odoo.define('add_tree_button.product_tree_button', function (require) {
    "use strict";
    var core = require('web.core');
    var ListController = require('web.ListController');
    var ListView = require('web.ListView');
    var viewRegistry = require('web.view_registry');

    var QWeb = core.qweb;

    var ProductListController = ListController.extend({
        /**
         * 继承tree视图的控制器,增加我们自定义按钮的绑定时间
         * @override
         */
        renderButtons: function () {
            this._super.apply(this, arguments);
            // 渲染qweb模板,展示测试按钮,这里的值为模板名
            this.$buttons.append($(QWeb.render("add_tree_button.product_test_button", this)));
            var self = this;
            // 按类名绑定按钮点击事件
            this.$buttons.on('click', '.o_product_test_button', function () {
                // 1.打开视图
                self.do_action({
                    type: 'ir.actions.act_window',
                    res_model: 'product.template',
                    target: 'new',
                    views: [[false, 'form']],
                    flags: {mode: 'edit'},
                }, {
                    on_reverse_breadcrumb: function () {
                        self.reload();
                    },
                    on_close: function () {
                        self.reload();
                    }
                });

                // 2.执行python代码
                // if (self.getSelectedIds().length == 0) {
                //     return;
                // }
                // return self._rpc({
                //     model: 'product.template',
                //     method: 'test_print',
                //     // 传入选择数据的id
                //     args: [self.getSelectedIds()],
                // });
                
            });
        }
    });

    var ProductListView = ListView.extend({
        /**
         * 继承tree视图,将上面的控制逻辑加入视图中
         * @override
         */
        config: _.extend({}, ListView.prototype.config, {
            Controller: ProductListController,
        }),
    });

    // 注册视图,上面使用派生继承,没有修改原本的tree视图,所以需要注册后使用
    viewRegistry.add('product_tree_button', ProductListView );
});

• xml: 引入自定义js

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <!--引入js-->
    <template id="assets_backend" inherit_id="web.assets_backend">
        <xpath expr="script[last()]" position="after">
            <script type="text/javascript" src="/add_tree_button/static/src/js/list_view.js"></script>
        </xpath>
    </template>
</odoo>

• xml:在tree视图中指定使用自定义的list_view

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <record id="product_template_tree_view_inherit" model="ir.ui.view">
        <field name="name">product.template.tree.view.inherit</field>
        <field name="model">product.template</field>
        <field name="inherit_id" ref="product.product_template_tree_view"/>
        <field name="arch" type="xml">
            <xpath expr="//tree" position="attributes">
                <!--修改js_class属性改为使用自定义的list_view-->
                <attribute name="js_class">product_tree_button</attribute>
            </xpath>
        </field>
    </record>
</odoo>