Odoo自定义视图教程

最新推荐文章于 2024-06-08 01:00:00 发布
最新推荐文章于 2024-06-08 01:00:00 发布
阅读量2.5k 收藏 18
点赞数 6
分类专栏： odoo 文章标签： python
原文链接：https://www.magicican.com/post/odoo-custom-view-tutorial.html
版权

我们在Odoo开发时基本都会对模型定义相关视图，其中常常用到的有form，tree，kanban,另外还有calendar，pivot，graph等视图，可以说视图是Odoo很重要的一个组成部分。此外有时视图自带的功能无法满足需求时，我们还需要尝试去对视图做自定义扩展，所以适当的了解视图的背后的运行机制可以让我们更从容、高效的面对视图开发。

这篇教程中我会介绍如何定义视图，视图的基本运行流程，一些主要属性以及实战部分。为了避免篇幅过长，一些在 Odoo 中添加自定义dashboard页面已经讲解过相同功能点，这篇教程中我不再作讲解，如果读者学习本篇教程感觉困难，那么可以先阅读自定义dashboard的教程。

Prerequisite

本教程基于以下环境开发:

  • 系统: windows wsl - Ubuntu 18.04
  • Odoo: Nightly Odoo 构建的post-20200101 12.0 版本
  • 数据库: PostgreSQL 10.11

本教程中的示例代码可以从https://github.com/findsomeoneyys/odoo-custom-view-tutorial中获取，仓库中的每个tag对应一个章节结束后的完整代码，读者可以通过类似以下方式来自由切换到不同章节代码。

1

git checkout v0.1

定义基本模型

可以通过git checkout v0.1查看本章节的完整代码

为了方便展示新视图，我们需要建立基本的模型，视图，和默认数据，这里我建了个Game模型，包含名称，下载量和平台字段。

1
2
3
4
5
6
7
8
9
10
11

# -*- coding: utf-8 -*-
from odoo import models, fields, api


class Game(models.Model):
    _name = 'echart_views.game'
    _description = 'Games'

    name = fields.Char('游戏名', required=True)
    downloads = fields.Integer(string='下载量', default=0)
    platform = fields.Char(string='平台')

安装上模块后，便可看到基本的视图。

alt

定义新视图

可以通过git checkout v0.2查看本章节的完整代码

定义一个新视图的操作量比较大，我们需要给odoo的python代码中增加新视图类型与视图模式，其次我们还需要定义js相关文件和模板代码。

让Odoo识别新视图类型

首先我们在model下建立两个文件ir_action_act_window.py和ir_ui_view.py，然后加入相关代码，这是为了odoo可以识别我们新定义的视图tag，如果没有这部分代码，在加载相关的xml文件会报错并提示你odoo没有这种类型视图。
这里我把我的新视图命名为eview

1
2
3
4
5
6
7
8
9
10

ir_action_act_window.py

# -*- coding: utf-8 -*-
from odoo import fields, models


class ActWindowView(models.Model):
    _inherit = 'ir.actions.act_window.view'

    view_mode = fields.Selection(selection_add=[('eview', 'echart views')])

1
2
3
4
5
6
7
8
9
10

ir_ui_view.py

# -*- coding: utf-8 -*-
from odoo import fields, models


class View(models.Model):
    _inherit = 'ir.ui.view'

    type = fields.Selection(selection_add=[('eview', 'echart views')])

同时也别忘了在models/__init__.py中加入新增的class

1
2
3
4
5

# -*- coding: utf-8 -*-

from . import models
from . import ir_ui_view
from . import ir_action_act_window

增加视图所需js文件

Odoo的视图中的底层实现已经将相关功能抽象成几个部分，所以我们只需要继承并实现Odoo为我们预留好的逻辑即可, 一个完整的视图是由view, controller, model, renderer这几个组件组成的。Odoo的视图的实现使用了MVC设计模式,它们之间的关系如下图所示:

alt

其中需要注意的是MVC设计模式在视图中实际对应controller, model, renderer(MRC),这是因为View在Odoo中有特殊的历史含义(也就是我们提到的展示数据的一种视图类型)。在这几部分中，View更多充当一个入口的角色，类似后端的路由。

现在我们增加相关js文件与实现逻辑，同时我会讲解各个组件的相关生命周期函数。这里需要注意的是，相关代码注释中如果上面包含@returns {Deferred},则需要返回一个Deferred对象，这是因为odoo是通过这种方式来增加相关函数的回调执行，如果不返回Deferred对象，有时会产生程序错误，大部分的时候我们只需加上return this._super.apply(this, arguments)或者$.when()即可。

实现Controller

Odoo对于Controller部分抽象出web.AbstractController，所以我们只需继承这个类并填写相关逻辑。
在static/src/js新增eview_controller.js文件，并键入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

odoo.define('echart_views.Controller', function (require) {
    'use strict';

    var AbstractController = require('web.AbstractController');
    var core = require('web.core');
    var qweb = core.qweb;

    var EchartController = AbstractController.extend({
        init: function (parent, model, renderer, params) {
            console.log("eview controller >>> init");
            this._super.apply(this, arguments);
        },
        /**
         * @returns {Deferred}
         */
        start: function() {
            console.log("eview controller >>> start");
            return this._super();
        },
        // 该方法会生成导航栏中的按钮，并可增加绑定按钮事件
        renderButtons: function ($node) {
            console.log("eview controller >>> renderButtons");
            this._super.apply(this, arguments);
        },
        /**
         * 执行该方法重新加载视图，默认逻辑是对调用update的封装
         * @param {Object} [params] This object will simply be given to the update
         * @returns {Deferred}
         */
        reload: function (params) {
            console.log("eview controller >>> reload");
            return this._super.apply(this, arguments);
        },
        /**
         * update是Controller的关键方法，在Odoo默认逻辑中，当用户操作搜索视图，或者部分内部更改会主动调用该方法。
         * 当我们自行编写相关方法时需要主动调用该函数。
         * 这个方法会调用model重新加载数据并通知renderer执行渲染
         * @param {*} params
         * @param {*} options
         * @param {boolean} [options.reload=true] if true, the model will reload data
         *
         * @returns {Deferred}
         */
        update: function (params, options) {
            console.log("eview controller >>> update");
            return this._super.apply(this, arguments);
        },
        /**
         * _update是update的回调方法，区别在于update是重新渲染页面主体部分，
         * _update则是渲染除了主体部分外的组件，比如控制面板中的组件 (buttons, pager, sidebar...)
         * @param {*} state
         * @returns {Deferred}
         */
        _update: function (state) {
            console.log("eview controller >>> _update");
            return this._super.apply(this, arguments);
        },


    });

    return EchartController;

});

实现Model

同样的，Model部分对应的抽象类是web.AbstractModel, Model是挂在Controller的一个对象，所有数据相关的部分都需要通过它来处理，这部分的主要逻辑很简单，只需要实现get和load方法，通过rpc等方式向后台请求数据，将数据结果保存在对象上比如this.data=result，然后在get方法中返回this.data即可。

在static/src/js新增eview_model.js文件，并键入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

odoo.define('echart_views.Model', function (require) {
    'use strict';

    var AbstractModel = require('web.AbstractModel');

    var EchartModel = AbstractModel.extend({
        /**
         * 该方法需要返回renderer所需的数据
         * 数据可以通过load/reload执行相关获取数据方法时，设置到该对象上
         */
        get: function () {
            console.log("eview model >>> get");
            this._super();
        },
        /**
         * 只会初次加载时执行一次，需要自定义相关数据获取方法获取数据并设置到该对象上
         *
         * @param {Object} params
         * @param {string} params.modelName the name of the model
         * @returns {Deferred} The deferred resolves to some kind of handle
         */
        load: function (params) {
            console.log("eview model >>> load");
            return this._super.apply(this, arguments);
        },
        /**
         * 当有相关数据变动时，重新获取数据。
         *
         * @param {Object} params
         * @returns {Deferred}
         */
        reload: function (handle, params) {
            console.log("eview model >>> reload");
            return this._super.apply(this, arguments);
        },
    });

    return EchartModel;

});

实现Renderer

Renderer部分对应的抽象类是web.AbstractModel，renderer只需关注拿到数据并渲染页面即可，其中this.state对应的是Model中get方法获取的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

odoo.define('echart_views.Renderer', function (require) {
    'use strict';

    var AbstractRenderer = require('web.AbstractRenderer');
    var core = require('web.core');

    var qweb = core.qweb;

    var EchartRenderer = AbstractRenderer.extend({
        init: function (parent, state, params) {
            console.log("eview renderer >>> init");
            this._super.apply(this, arguments);

        },
        /**
         *  renderer的渲染逻辑部分，自行渲染相关数据并插入this.$el中
         *
         * @abstract
         * @private
         * @returns {Deferred}
         */
        _render: function () {
            console.log("eview renderer >>> _render");
            var content = $("<div><p> eview </p></div>");
            this.$el.append(content);
            return this._super.apply(this, arguments);
        },
    });

    return EchartRenderer;

});

实现View

View对应的是web.AbstractView抽象类，是View的函数入口，它包含视图的基本定义信息，同时会根据传入的视图结构信息，相关参数初始化controller, model, renderer，当初始化controller完毕后，页面之后的相关处理都与这个类无关了。

在static/src/js新增eview_view.js文件，并键入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

odoo.define('echart_views.View', function (require) {
    'use strict';

    var AbstractView = require('web.AbstractView');
    var view_registry = require('web.view_registry');
    var Controller = require('echart_views.Controller');
    var eViewModel = require('echart_views.Model');
    var eViewRenderer = require('echart_views.Renderer');


    var EchartView = AbstractView.extend({
        display_name: 'EchartView',
        icon: 'fa-bar-chart',
        cssLibs: [
        ],
        jsLibs: [
        ],
        config: {
            Model: eViewModel,
            Controller: Controller,
            Renderer: eViewRenderer,
        },
        viewType: 'eview',
        groupable: false,
        /**
         * View的入口，会传入相关视图定义的参数(视图结构，字段信息等。。)，
         * 函数会处理并生产3个主要字段：this.rendererParams， this.controllerParams，this.loadParams
         * 分别对应renderer，controller，model的初始化参数，我们可以根据需要自行对相关增加相关参数
         * @param {Object} viewInfo.arch
         * @param {Object} viewInfo
         * @param {Object} viewInfo.fields
         * @param {Object} viewInfo.fieldsInfo
         * @param {Object} params
         * @param {string} params.modelName The actual model name
         * @param {Object} params.context
         */
        init: function (viewInfo, params) {
            console.log("eview view >>> init");
            this._super.apply(this, arguments);
        },
        /**
         * View的主要的执行逻辑，这个方法会分别执行getModel，getRenderer初始化相关组件，
         * 然后对renderer, model设置controller就完成了作用，之后的View相关操作与这个类无关了
         * @param {}} parent 
         */
        getController: function (parent) {
            console.log("eview view >>> getController");
            return this._super.apply(this, arguments);
        },
        // 这里会初始化model，并执行model中load方法
        getModel: function (parent) {
            console.log("eview view >>> getModel");
            return this._super.apply(this, arguments);
        },
        getRenderer: function (parent, state) {
            console.log("eview view >>> getRenderer");
            return this._super.apply(this, arguments);
        },

    });

    view_registry.add('eview', EchartView);

    return EchartView;

});

加载资源与添加新视图

js部分实现后，我们需要把相关文件加载进odoo中，在views目录下新建文件templates.xml并添加相关代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

    <template id="assets_end" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">

            <script type="text/javascript" src="/echart_views/static/src/js/eview_view.js" />
            <script type="text/javascript" src="/echart_views/static/src/js/eview_model.js" />
            <script type="text/javascript" src="/echart_views/static/src/js/eview_controller.js" />
            <script type="text/javascript" src="/echart_views/static/src/js/eview_renderer.js" />

        </xpath>
    </template>

</odoo>

然后在__manifest__.py中引入该文件，最后在views.xml的act_window添加我们的新视图模式，以及我们的新视图定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<record id='echart_views_game_action' model='ir.actions.act_window'>
    <field name="name">Games</field>
    <field name="res_model">echart_views.game</field>
    <field name="view_type">form</field>
    <field name="view_mode">tree,form,eview</field>
</record>

...

<!-- eview View -->
<record id="echart_views_game_view_eview" model="ir.ui.view">
    <field name="name">Game echart view</field>
    <field name="model">echart_views.game</field>
    <field name="arch" type="xml">
        <eview>
            <field name="name"/>
            <field name="downloads"/>
            <field name="platform"/>
        </eview>
    </field>
</record>

小结

完成以上步骤后，重启Odoo并更新模块，打开debug=assets模式并进入视图，我们即可看到新增的视图效果与组件和相关函数的加载顺序了。

alt

实战

在前面的教程中我们了解到了views的组件初始化与生命周期函数，这也意味着我们可以在相关周期函数中加入自己的一系列事件，来实现我们自己独特的视图。
在接下来的章节中我会逐步实现加入视图模板，解析视图字段，事件绑定与处理等功能来实现一个基于echart的自定义饼图，这个视图中我们可以左上角自由切换定义在xml中的字段，饼图中则会统计该字段在数据库的全部数据：如果字段是数值，根据Name自动分类叠加，如果字段是字符串，则对该字段分组统计数量。

自定义模板与按钮事件绑定

可以通过git checkout v0.3查看本章节的完整代码

和在 Odoo 中添加自定义dashboard页面中的模板渲染流程一样，首先我们在eview_view.js的jsLibs中加上echart。

1
2
3
4
5

...

jsLibs: [
            'https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.min.js',
        ],

接着在static/src/xml新增qweb_template.xml文件并增加模板代码,同时在__manifest__.py中引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14

qweb_template.xml

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

    <t t-name="echart_views.page">
        <div class="container-fluid mt-3">
            <div id="app" class="mt-2" style="width: 800px;height:500px;">
                <p>echart</p>
            </div>
        </div>
    </t>

</templates>

1
2
3
4
5

__manifest__.py

'qweb': [
        'static/src/xml/qweb_template.xml',
    ]

然后在eview_renderer.js中做相关处理即可，这里我直接根据echart-饼图演示实现相关功能。

在init中加入option参数，同时在_render中渲染模板并初始化echart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

init: function (parent, state, params) {
    console.log("eview renderer >>> init");
    this._super.apply(this, arguments);
    this.echart_option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ]
            }
        ]
    };
    

},
_render: function () {
    console.log("eview renderer >>> _render");
    this.$el.empty();
    this.$el.append(qweb.render('echart_views.page'));
    var el = this.$el.find('#app')[0];
    var myChart = echarts.init(el);
    myChart.setOption(this.echart_option);
    return this._super.apply(this, arguments);
},

更新模板并刷新页面，再次打开eview时，我们就会看到一个饼图：

alt

接着我们为导航栏增加按钮，视图导航栏的按钮就是类似tree视图中创建、导入等按钮，通过重写Controller中的renderButtons方法便可轻松实现。
我们继续在qweb_template.xml中新增按钮组的模板代码

1
2
3
4
5
6
7
8
9
10
11

<t t-name="echart_views.buttons">
    <div class="btn-group" role="toolbar" aria-label="Main actions">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            统计字段
        </button>
        <div class="dropdown-menu o_echart_measures_list" role="menu">
            <a class="dropdown-item" href="#" data-field="name">名字</a>
            <a class="dropdown-item" href="#" data-field="downloads">下载量</a>
        </div>
    </div>
</t>

在eview_controller.js中修改renderButtons函数，渲染按钮组并为它们绑定事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

renderButtons: function ($node) {
    console.log("eview controller >>> renderButtons");
    this._super.apply(this, arguments);
    this.$buttons = $(qweb.render('echart_views.buttons'));
    this.$measureList = this.$buttons.find('.o_echart_measures_list');
    this.$buttons.click(this._onButtonClick.bind(this));
    this.$buttons.appendTo($node);
},

....

_onButtonClick: function (event) {
    var $target = $(event.target);
    var field;
    if ($target.parents('.o_echart_measures_list').length) {
        event.preventDefault();
        event.stopPropagation();
        field = $target.data('field');
        _.each(this.$measureList.find('.dropdown-item'), function (item) {
            var $item = $(item);
            $item.toggleClass('selected', $item.data('field') === field);
        });
    }
},

再次进入页面，我们可以发现导航栏部分多了 ‘统计字段’下拉按钮，点击相关选项，按钮组就会处于激活状态

alt

获取视图定义结构信息

可以通过git checkout v0.4查看本章节的完整代码

刚刚我们的例子中按钮组的数组是写死的，现在我们来做一些改动，把这部分修改成根据我们定义在xml的字段动态生成下拉菜单。

在我们使用Odoo原生xml定义的field中，是可以自定义添加属性，并且odoo对应会有不一样的行为，比如加上invisible=1时，该字段在视图中会自动隐藏，现在我们也为eview视图中做一些类似的自定义属性处理，我们增加一个type属性，type="name"代表这个字段是记录的显示名字，type="measure"代表这个字段是可加入我们按钮组的下拉菜单中。

现在我们打开views/views.xml，修改eview的视图，为field加上type属性, 此外 也为eview加上一个chart="bar"属性

1
2
3
4
5
6
7
8
9
10
11

<record id="echart_views_game_view_eview" model="ir.ui.view">
    <field name="name">Game echart view</field>
    <field name="model">echart_views.game</field>
    <field name="arch" type="xml">
        <eview chart="bar">
            <field name="name" type="name"/>
            <field name="downloads" type="measure"/>
            <field name="platform" type="measure"/>
        </eview>
    </field>
</record>

之前提的介绍中提到过视图的结构信息都是会传入View的init方法中,其中this.arch包含Odoo的已经为我们解析好的视图结构化数据,this.fields则包含对应模型中全部字段的信息(包括魔法字段)，在debug=assets控制台打断点输出，我们可以轻松看到完整的结构。

alt

知道了数据结构后剩下的事就简单多了，我们自定义三个参数displayNameField, measure, measures，分别表示哪个字段对应记录的显示名称，视图当前所选择的统计字段，统计字段的所对应字段定义信息。其中measure, measures会在下章节中使用到。
现在我们回到eview_view.js,修改init方法为如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

init: function (viewInfo, params) {
    console.log("eview view >>> init");
    this._super.apply(this, arguments);

    var self = this;
    var displayNameField;
    var measure;
    var measures = {};

    this.arch.children.forEach(function (field) {
        var fieldName = field.attrs.name;
        if (field.attrs.type === 'measure') {
            if (!measure) {
                measure = fieldName;
            }
            measures[fieldName] = self.fields[fieldName];
        } else if(field.attrs.type === 'name') {
            displayNameField = fieldName;
        }
    });

    this.controllerParams.measures = measures;
},

这段代码中最后一句this.controllerParams.measures = measures;代表我们为Controller的初始参数中添加measures属性，这样我们可以在Controller获取到
measures数据，到时就可使用这部分数据来渲染模板。
接着我们打开eview_controller.js在init中接收measures字段，并在renderButtons使用这部分数据渲染视图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

init: function (parent, model, renderer, params) {
    console.log("eview controller >>> init");
    this._super.apply(this, arguments);
    this.measures = params.measures;
}

....

renderButtons: function ($node) {
    console.log("eview controller >>> renderButtons");
    this._super.apply(this, arguments);
    var context = {
            measures: _.sortBy(_.pairs(this.measures), function (x) {
                return x[1].string.toLowerCase();
            }),
        };
    this.$buttons = $(qweb.render('echart_views.buttons', context));

    .....
},

最后打开xml/qweb_template.xml,将下拉选项部分改成模板语法渲染

1
2
3
4
5

<div class="dropdown-menu o_echart_measures_list" role="menu">
    <t t-foreach="measures" t-as="measure">
        <a role="menuitem" href="#" class="dropdown-item" t-att-data-field="measure[0]"><t t-esc="measure[1].string"/></a>
    </t>
</div>

此时重启Odoo并更新模块，再次进入视图我们可以发现统计字段的选项改变了，我们也可以自行尝试在xml中去除相关field，统计字段的选项也会对应动态改变。

通过Model在页面中传递数据

可以通过git checkout v0.5查看本章节的完整代码

在视图操作用经常会改变数据，数据改变后我们需要及时处理相关数据并更新视图，在这章里我们将改进按钮组的相关处理，当点击选项时，数据会更新到model中并实时更新我们的视图页面。

回到eview_view.js,在init末尾加上model的初始参数

1
2
3
4
5
6
7
8

init: function (viewInfo, params) {

    ...

    this.loadParams.measure = measure;
    this.loadParams.measures = measures;
    this.loadParams.displayNameField = displayNameField || 'display_name';
},

然后打开eview_model.js，在load和reload的方法中增加获取相关字段值逻辑,同时修改get方法为返回相关字段数据,这里返回数据的部分设置measureString字段来返回对应字段的定义名称。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

get: function () {
    console.log("eview model >>> get");
    var measureString = this.measures[this.measure]['string'];
    return {measure: this.measure, measureString: measureString};
},
load: function (params) {
    console.log("eview model >>> load");
    this.measure = params.measure;
    this.measures = params.measures;
    this.displayNameField = params.displayNameField;
    return this._super.apply(this, arguments);
},
reload: function (handle, params) {
    console.log("eview model >>> reload");
    if ('measure' in params) {
        this.measure = params.measure;
    }
    return this._super.apply(this, arguments);
},

同时我们要修改Controller的逻辑，当有数据变动时，我们需要通过调用update方法来更新数据，update会自动代入参数调用model中的reload方法，
同时，触发视图的_render方法重新渲染数据。现在我们稍微修改下_onButtonClick的逻辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

_onButtonClick: function (event) {
    var $target = $(event.target);
    var field;
    if ($target.parents('.o_echart_measures_list').length) {
        event.preventDefault();
        event.stopPropagation();
        field = $target.data('field');
        this._setMeasure(field);
    }
},
_setMeasure: function (measure) {
    var self = this;
    this.update({measure: measure}).then(function () {
        self._updateButtons();
    });
},
_updateButtons: function () {
    if (!this.$buttons) {
        return;
    }
    var state = this.model.get();
    _.each(this.$measureList.find('.dropdown-item'), function (item) {
        var $item = $(item);
        $item.toggleClass('selected', $item.data('field') === state.measure);
    });
},

这里把逻辑拆成了两个方法，一个是_updateButtons，他会通过model.get()来获取当前的数据，然后激活下拉菜单的选项状态，另外一个是_setMeasure，
这个方法的逻辑也很简单，就是对update的一个封装。此外我们再把_updateButtons方法也放在renderButtons中调用下，这样初次加载视图时也会有默认的选项激活状态

1
2
3
4
5

renderButtons: function ($node) {
    ...
    this._updateButtons();
    this.$buttons.appendTo($node);
},

最后我们要修改下renderer里面的_render方法，根据model里面的数据来渲染页面。我们为option增加个title属性，并在_render方法中设置这个属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

this.echart_option = {
    ...
    title: {
        text: '',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#ccc'
        }
    },
};

....

_render: function () {
    console.log("eview renderer >>> _render");
    this.$el.empty();

    this.echart_option.title.text = this.state.measureString;
    ....
},

Odoo会自动把从model.get()的数据放到this.state中，直接获取即可。

刷新页面，此时我们我们可以看到点击下拉选项时，页面会刷新，同时上方标题属性会显示对应字段的定义名。

alt

在Model向后台请求数据

可以通过git checkout v0.6查看本章节的完整代码

到目前为止，我们基本完成了视图的基本功能了，接下来我们要增加model的逻辑，向后台获取再渲染显示。在eview_model.js中新增一个_fetchData方法获取数据，同时在其他需要获取数据的方法中调用这个函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

get: function () {
    console.log("eview model >>> get");
    return this.data;
},
load: function (params) {
    console.log("eview model >>> load");
    this.modelName = params.modelName;
    this.domain = params.domain || [];
    this.measure = params.measure;
    this.measures = params.measures;
    this.displayNameField = params.displayNameField;
    return this._fetchData();
},
reload: function (handle, params) {
    console.log("eview model >>> reload");
    if ('measure' in params) {
        this.measure = params.measure;
    }
    if ('domain' in params) {
        this.domain = params.domain;
    }
    return this._fetchData();
},
_fetchData: function () {
    var self = this;
    var measureFieldInfo = this.measures[this.measure];
    var measureString = measureFieldInfo['string'];
    var seriesLegend = [];
    if (measureFieldInfo.type === 'integer') {
        return this._rpc({
            model: this.modelName,
            method: 'search_read',
            domain: this.domain,
            fields: [this.measure, this.displayNameField],
        }).then(function (result) {
            var seriesData = _.map(result, function (data) {
                return {value: data[self.measure], name: data[self.displayNameField]}
            });
            _.each(seriesData, function (d) {
                seriesLegend.push(d['name']);
            });
            self.data = {seriesData: seriesData, measureString: measureString, measure: self.measure, seriesLegend: seriesLegend};
        });
    } else {
        return this._rpc({
            model: this.modelName,
            method: 'search_read',
            domain: this.domain,
            fields: [this.measure],
        }).then(function (result) {
            var resGroupAndCount = _.pairs(_.countBy(result, function(o){return o[self.measure]}));
            var seriesData = _.map(resGroupAndCount, function (data) {
                return {value: data[1], name: data[0]}
            });
            _.each(seriesData, function (d) {
                seriesLegend.push(d['name']);
            });
            self.data = {seriesData: seriesData, measureString: measureString, measure: self.measure, seriesLegend:seriesLegend};
        });
    }
},

这段代码中在初始化数据中加入Odoo参数中的模型名modelName,和搜索框的内容domain，之后通过_rpc方法调用模型自带的search_read获取字段数据，接着在根据字段类型进行分类统计把数据归纳出来放入self.data中。
之后在eview_renderer.js里把option的data部分删除，接着和上个章节一样，在_renderer设置相关字段。

1
2
3
4
5
6

...
this.echart_option.title.text = this.state.measureString;
this.echart_option.series[0].name = this.state.measureString;
this.echart_option.series[0].data = this.state.seriesData;
this.echart_option.legend.data = this.state.seriesLegend;
...

完成后刷新页面再次进入视图，点击选项Odoo会自动从后台获取对应字段的数据，同时右上角的搜索框我们也可以自由输入数据过滤结果。

alt

让Crontroller处理组件自定义事件

可以通过git checkout v0.7查看本章节的完整代码

在之前的绑定点击事件是指针对按钮组的，实际上当renderer为我们渲染好页面的时候，我们也会有要处理页面相关事件的要求，这个实际上也很简单：
在qweb_template.xml中div上方我们新增一个按钮：

1
2
3
4
5
6

<div class="container-fluid mt-3">
    <button class="btn btn-primary ml-2" id="reloadView">重新加载</button>
    <div id="app" class="mt-2" style="width: 800px;height:500px;">
        <p>echart</p>
    </div>
</div>

然后在eview_renderer.js中加入事件注册和相关处理函数:

1
2
3
4
5
6
7
8
9
10
11

events: _.extend({}, AbstractRenderer.prototype.events, {
    'click #reloadView': '_onClickReloadView',
}),

...

_onClickReloadView: function (ev) {
    ev.preventDefault();
    console.log("eview renderer >>> _onClickReloadView");
    
}

这时刷新页面点击按钮，可以看到控制台的对应输出。但是这只能处理特定元素上的事件，有时候我们会希望点击后整个视图能响应到变化，做一些特别的处理，这时候就要主动触发一个OdooEvent，同时Controller里面加入对应事件处理，比如接下来的代码中就实现了点击按钮让视图重新加载的功能：

修改renderer中的_onClickReloadView函数，在里面主动通过trigger_up触发一个OdooEvent

1
2
3
4
5
6

_onClickReloadView: function (ev) {
    ev.preventDefault();
    console.log("eview renderer >>> _onClickReloadView");
    this.trigger_up('reload_view');
    
}

在eview_controller.js中加入相关事件处理：

1
2
3
4
5
6
7
8
9
10

custom_events: _.extend({}, AbstractController.prototype.custom_events, {
    'reload_view': '_onClickReloadView',
}),

...

_onClickReloadView: function (ev) {
    console.log("eview controller >>> _onClickReloadView");
    this.reload();
},

再次刷新页面点击按钮，可以看到echart的饼图会重新载入。

羽落花开
关注
  • 6
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
odoo Tree视图自定义按钮简单代码逻辑分享
07-27
odoo Tree视图自定义按钮简单代码逻辑分享+简单代码逻辑+通俗易懂+免费分享
odoo17开发教程（9）：自定义视图
03-14 883
我们在前一章中看到，Odoo 能够为给定模型生成默认视图。实际上，默认视图对于业务应用程序来说是绝对不可接受的。相反，我们至少应该以合理的方式组织各个字段。视图在 XML 文件中定义，包含操作和菜单。它们是 ir.ui.view 模型的实例。
Odoo15官方文档 开发 核心教程 第7章：基本视图
白M的博客
12-09 489
我们在前一章中已经看到，Odoo能够为给定模型生成默认视图。实际上，对于业务应用程序来说，默认视图是永远不能满足的。相反，我们至少应该有逻辑的组织各个领域。视图在带有动作和菜单的XML文件中定义。它们是ir.ui.view模型的实例。
【odoo】odoo视图扩展中的position属性
最新发布
Hello, World！！！
06-08 492
odoo视图扩展中的position属性，before,after,replae,inside,attributes的详细作用
odoo前端开发widget
zjmy的博客
05-22 1575
在第九章 后端视图中已经学到，我们可以使用微件来以不同格式展示某些数据。例如，我们使用了widget='image’将二进制字段展示为图片。要演示如何创建自己的微件，我们将编写一个用户可以选择整型字段的微件，但我们将采用不同的展现方式。使用的不是输入框，而是展示为颜色拾取器，这样我们我们可以选择颜色数值。这里的数值与相关的颜色存在映射关系。
odoo 自定义视图_通过使用合并和自定义视图组重构您的活动或片段
weixin_26728245的博客
10-09 271
odoo 自定义视图In the Android application, Activity or Fragment would be the base component for the single page. You can put other UI controls into a single layout xml and inflate it in anActivity or a Fra...
转: seajs知识点与cmd规范
dayanwu2842的博客
04-23 94
在比较之前，我们得先来了解下什么是AMD规范？什么是CMD规范？当然先申明一下，我个人也是总结下而已，也是网上看到的资料，自己总结下或者可以说整理下而已，供大家更深入的了解！因为我们都知道 AMD规范： 是 RequireJS 在推广过程中对模块定义的规范化产出的，而CMD规范： 是SeaJS 在推广过程中对模块定义的规范化产出的。 什么是CMD规范？ 在CMD中 一个模块就...
自定义插件：Odoo自定义插件
02-15
本文将深入探讨如何在Odoo中创建自定义插件，特别是关于“定制附件”这一主题。 首先，了解Odoo插件的基本结构至关重要。一个标准的Odoo插件通常包含以下文件和目录： 1. `__manifest__.py`：这是插件的核心配置...
MYVIEWS_ODOO12视图_
09-29
本模块主要聚焦于视图的设计和实现，通过XML语言进行描述，使得开发者能够自定义用户界面，以满足特定业务需求。 首先，我们要理解什么是ODOO中的视图。视图是数据模型的一个表示层，它决定了数据如何在界面上呈现...
odoo相关教程
11-25
2. **Odoo 10应用手册**：此文档可能详细介绍了如何使用Odoo 10的各种功能，包括模块的安装、配置、自定义等，对于初学者理解和应用Odoo有很大帮助。 3. **Packt.Odoo.10.Development.Essentials.pdf**：这是一本...
odoo10 report使用自定义的CSS
11-22
在这个场景中，我们将深入探讨如何在Odoo 10中使用自定义CSS来美化报表，并且这些CSS样式是通过XML文件来定义的。 首先，我们需要了解Odoo中的报告系统。报告是基于rml（Rich Markup Language）或者HTML构建的，...
odoo自定义html,odoo里的javascript学习---自定义插件
weixin_35067976的博客
06-20 332
插件效果图定义jsodoo.define('auto_widget',function(require){"use strict"//通过扩展AbstractField来扩展 fieldvar AbstractField = require('web.AbstractField');var fieldRegistry = require('web.field_registry');var core...
Odoo修改界面的样式
Srekal的博客
12-17 4198
序言:时间是我们最宝贵的财富,珍惜手上的每个时分 odoo作为一款开源ERP,框架不可谓不好,但是许多前端细节依旧不尽人意,例如 tree视图列表中 数字类型的字段不居中如下图 在Excel深入人心的今天,这个不对齐让人无法忍受，那么就让我们通过修改css样式来搞定他把. 一:首先通过浏览器的调试模式我们知道了 数字类型字段的css类名为 o_list_number 二:新建模块...
odoo16-04-视图的写法-创建自定义视图
weixin_47761086的博客
08-17 433
ir.ui.view是Odoo中的一个模型，用于表示视图（view）的定义和配置。在Odoo中，视图被用于呈现和组织用户界面的布局和内容name：视图的唯一标识符。model：该视图适用的数据模型。arch：视图的XML定义，包含了关于如何显示和操作数据的具体信息。inherit_id：继承的视图的唯一标识符。priority：视图的优先级，用于决定使用哪个视图。mode：视图的模式，可以是primary（主要）或extension（扩展）。：该视图所属的字段的名称。key2。
Odoo Javascript 参考
weixin_30791095的博客
04-04 704
本文介绍了odoo javascript框架。从代码行的角度来看，这个框架不是一个大的应用程序，但它是非常通用的，因为它基本上是一个将声明性接口描述转换为活动应用程序的机器，能够与数据库中的每个模型和记录交互。甚至可以使用Web客户端修改Web客户端的接口。 这里有一个有用的html版本的文档：Javascript API 概览 这个Javascript框架主要设计用于三个地方使...
odoo 的 javascript 架构
weixin_37583798的博客
03-22 1487
大家好，本文主要对 ODOO 的 JavaScript 架构进行讲解：首先， odoo.define函数是干什么的？答：在 odoo 中，通过使用 odoo.define ('js_module_name', ...) 来声明一个模块，然后，其他模块可以通过 require ('js_module_name') 来调用这个模块。例如：odoo.define('js_模块_名称',A = require('js_模块_名称_A');B = require('js_模块_名称_B');
自定义Odoo的界面样式
听雨轩
07-29 3756
自定义Odoo的界面样式，最容易想到的办法就是找到相应的css文件进行修改，但这种方式太丑陋，不推荐。更优雅的的办法是自定义一个模块来个性化风格。下面以安装在centos上的GreenOdoo为例简单描述一下过程。第一步：创建自定义模块：在source目录下执行../runtime/python/bin/python odoo.py scaffold mytheme myaddons创建一个名...
odoo 自定义登录界面
Gaivn GU
06-21 740
odoo的登录界面太单一，而且登录的方式不够多。所以 自己单独用jinja2 渲染了一个html 进行登录。
Odoo11 修改网页样式
weixin_33843409的博客
11-29 432
1. 修改前台网页的icon图标效果图如下：①处的修改比较简单，只需要进入后台。“设置”--“公司”可以直接将鼠标放在左上的大图标上，点击“编辑公司数据”或者是点击“用户&公司”--“公司”进入公司数据修改面板，替换图片即可。②处的icon图标替换就需要查找代码了。一般而言，要替换网站的icon图标，会通过浏览器F12控制台，找到链接图片的路径，从而在项目目录里找到这...
odoo新建自定义视图
08-24
要在Odoo中新建自定义视图，需要进行以下操作： 1. 在odoo的python代码中增加新视图类型与视图模式。这可以通过在ir_actions_act_window.py和ir_ui_view.py文件中添加相关代码来实现。例如，在ir_actions_act_window.py文件中，我们可以增加以下代码来定义新的视图模式： ``` # -*- coding: utf-8 -*- from odoo import fields, models class ActWindowView(models.Model): _inherit = 'ir.actions.act_window.view' view_mode = fields.Selection(selection_add=[('eview', 'echart views')]) ``` 在ir_ui_view.py文件中，我们可以添加以下代码来定义新的视图类型： ``` # -*- coding: utf-8 -*- from odoo import fields, models class View(models.Model): _inherit = 'ir.ui.view' type = fields.Selection(selection_add=[('eview', 'echart views')]) ``` 这样，Odoo就可以识别我们新定义的视图类型。 2. 定义js相关文件和模板代码。通过编写相应的javascript文件和模板代码，我们可以实现对自定义视图的布局和行为的控制。这些文件需要与新定义的视图类型相关联，并与视图模板文件进行交互。具体的实现方法可以根据项目需求和技术要求来确定。 这样，在执行以上操作之后，就可以在Odoo中创建自定义视图了。自定义视图可以根据具体需求来设计和实现，包括自定义的布局、交互和样式等方面 。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Odoo自定义视图教程](https://blog.csdn.net/u012739578/article/details/121670077)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值