odoo10中在tree视图创建旁边增加按钮

目标要求:在系统的创建按钮旁边增加新的按钮实现自定义的功能

image.png

一 新增一个按钮

odoo的前端都是qweb渲染的,找到创建的按钮的模板位置,我们在后面加上一个按钮标签即可

• 按钮模板所在位置:odoo/addons/web/static/src/xml/base.xml

<t t-name="ListView.buttons">
    <t t-if="!widget.no_leaf and widget.options.action_buttons !== false">
        <div class="o_list_buttons">
            <t t-if="widget.options.addable and widget.is_action_enabled('create')">
                <button type="button" class="btn btn-primary btn-sm o_list_button_add" accesskey="c">
                    <t t-esc="widget.options.addable"/>
                </button>
            </t>
            <button type="button" class="btn btn-primary btn-sm o_list_button_save" accesskey="s">
                Save
            </button>
            <button type="button" class="btn btn-default btn-sm o_list_button_discard" accesskey="j">
                Discard
            </button>
        </div>
    </t>
</t>

• 我们需要在这个ListView.buttons中增加一个button标签,为了不改动源码我们通过继承增加,新建一个add_button.xml
  这个文件需要在__manifest__.py文件'qweb'中引入才会进行加载
  'qweb': ['static/src/xml/add_button.xml']

<?xml version="1.0" encoding="UTF-8"?>
<template xml:space="preserve">
<!--    继承ListView.buttons模板-->
    <t t-extend="ListView.buttons">
<!--       在 button.o_list_button_discard 标签之后增加 -->
      <t t-jquery="button.o_list_button_discard" t-operation="after">
<!--          通过'add_new'进行判断什么时候显示按钮,如果不加这个t-if判断,那么所有的tree视图都将出现这个新按钮-->
          <t t-if="widget.options.addable and widget.is_action_enabled('add_new')">
<!--              button标签,记得加上一个'oe_list_button_news'自定义的类用于js定位绑定动作-->
            <button class="btn btn-primary btn-sm oe_list_button_news" type="button">新按钮</button>
          </t>
      </t>
    </t>
</template>

二 在JS中进行对按钮显示的判断及按钮动作绑定

• 新建文件tree_button_action.js

odoo.define('tree_button.button_action', function (require) {
    "use strict";

    var View = require('web.View');
    var Model = require('web.Model');
    var ListView = require('web.ListView');

    ListView.include({
        render_buttons: function ($node) {
            this._super.apply(this, arguments);
            if (this.$buttons) {
                // 通过属性名绑定动作
                this.$buttons.find('.oe_list_button_news').click(this.proxy('new_action_2'));
            }
        },

        // 可以直接调用模型方法
        new_action_1: function () {
            var self = this
            var tree_button = new Model("tree.button");
            tree_button.call("func").then(function (result) {
                console.log(result);
            });
        },

        // 也可以调出模型视图,比如打开一个向导视图,action参数于python中一致
        new_action_2:function () {
            var self = this;
            this.do_action({
                name: "列表视图",
                res_model: "tree.button",
                // 注意tree视图类型在js中使用'list'
                // views: [[false, 'list'], [false, 'form']],
                views: [[false, 'form']],
                type: 'ir.actions.act_window',
                target: "new",
                context: self.dataset.get_context(),
                flags: {
                    action_buttons: false,
                }
            });
        },
    })

    View.include({
        // 判断按钮是否显示
        is_action_enabled: function (action) {
            // 这里'add_new'与add_button.xml中widget.is_action_enabled('add_new')对应
            if (action == "add_new") {
                var attrs = this.fields_view.arch.attrs;
                return (action in attrs) ? JSON.parse(attrs[action]) : false;
            } else {
                return this._super.apply(this, arguments);
            }

        }
    })

})

• 记得需要加载这个js才会生效,新建一个render_js.xml文件,且这个xml文件需要在_manifest中data 引入

<?xml version="1.0"?>
<odoo>
    <data>
        <template id="tree_button_render_js" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
<!--                js文件地址按实际填写-->
                <script src="tree_button/static/src/js/tree_button_action.js" type="text/javascript"/>
            </xpath>
        </template>
    </data>
</odoo>

三 显示按钮

在JS代码中设置按钮默认不显示,在需要显示的模型上设置属性为true即可显示

<!--tree_button视图-->
        <record id="tree_button_tree" model="ir.ui.view">
            <field name="name">tree.button.tree</field>
            <field name="model">tree.button</field>
            <field name="arch" type="xml">
<!--             在tree标签中将add_new设为true即可显示按钮-->
                <tree editable="bottom" add_new="true">
                    <field name="name"/>
                </tree>
            </field>
        </record>

最终项目结构:

image.png
项目代码放在码云:https://gitee.com/grey27/demo_addons/tree/master/tree_button