odoo 自定义视图

文件架构:

  

model 文件夹里面主要定义了  数据表  和 读取数据的方法  代码如下:

  web_funnet_chart.py:

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

class RunChart(models.Model):
    _name = ‘run.chart‘

    sales = fields.Integer()
    prices = fields.Integer()
    sale_date = fields.Date()

    @api.multi
    def get_run_chart_data(self):#获取数据库字段的值
        runCHart_ids = self.env[‘run.chart‘].search([])
        sale_lst = []
        price_lst = []
        date_lst = []
        runCHart_lst = []
        for runCHart in runCHart_ids:
            # leads = self.search_count([(‘sales‘, ‘=‘, sale.sales)])
            sale_lst.append(runCHart.sales)
            price_lst.append(runCHart.prices)
            date_lst.append(runCHart.sale_date)
        runCHart_lst.append((sale_lst,price_lst,date_lst))
        return runCHart_lst

视图的定义放在 \static\src\js\web_funnel_chart.js 这个文件里面

具体代码如下:

/*global Highcharts*/
odoo.define("web_funnel_chart.web_funnel_chart", function(require) {
    "use strict";
    console.log(require)
    var core = require("web.core");
    var dataset = require("web.data");
    var Widget = require("web.Widget");
    var _t = core._t;

    var web_funnel_chart = Widget.extend({
        template: "FunnelChart",
        start: function() {
            var self = this;
            var emp_child = [];
            self.run_chart_dataset = new dataset.DataSetSearch(self, "run.chart", {}, []);
            self.run_chart_dataset.call("get_run_chart_data", [
                []
            ]).done(function(callbacks) {
                Highcharts.chart(‘container‘, { /*  视图在这里开始定义  */
                chart: {
                    zoomType: ‘xy‘
                },
                title: {
                    text: ‘Daily sales and price charts‘
                },
                subtitle: {
                    text: ‘Remarks: basic version of the chart‘
                },
                xAxis: [{
                    categories: callbacks[0][2],
                    crosshair: true
                }],
                yAxis: [{ // Primary yAxis
                    labels: {
                        format: ‘{value} RMB‘,
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    },
                    title: {
                        text: ‘Price‘,
                        style: {
                            color: Highcharts.getOptions().colors[1]
                        }
                    }
                }, { // Secondary yAxis
                    title: {
                        text: ‘Sales‘,
                        style: {
                            color: Highcharts.getOptions().colors[0]
                        }
                    },
                    labels: {
                        format: ‘{value} Ton‘,
                        style: {
                            color: Highcharts.getOptions().colors[0]
                        }
                    },
                    opposite: true
                }],
                tooltip: {
                    shared: true
                },
                legend: {
                    layout: ‘vertical‘,
                    align: ‘left‘,
                    x: 120,
                    verticalAlign: ‘top‘,
                    y: 100,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || ‘#FFFFFF‘
                },
                series: [{
                    name: ‘Sales‘,
                    type: ‘column‘,
                    yAxis: 1,
                    data: callbacks[0][0],
                    tooltip: {
                        valueSuffix: ‘ Ton‘
                    }

                }, {
                    name: ‘Price‘,
                    type: ‘spline‘,
                    data: callbacks[0][1],
                    tooltip: {
                        valueSuffix: ‘ RMB‘
                    }
                }]
            });
            });

        },
    });

    core.action_registry.add("web_funnel_chart.funnel", web_funnel_chart);  /*把视图 注册在odoo里面  方便展示

});

\static\src\xml\web_funel_chear.xml  这个具体的作用还不太清楚(后续弄明白再更新)

<?xml version="1.0" encoding="UTF-8"?>
<templates>
    <t t-name="FunnelChart">
        <div id="container">
        </div>
    </t>
</templates>

\views\templates.xml  odoo的视图层   这个文件主要是把视图的相关文件与依赖包引进odoo

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template id="assets_backend" name="web_lead_funnel_chart_assets" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <script type="text/javascript"
                    src="/web_funnel_chart/static/src/lib/highcharts.js"/>
            <script type="text/javascript"
                    src="/web_funnel_chart/static/src/lib/funnel.js"/>
            <script type="text/javascript"
                    src="/web_funnel_chart/static/src/js/web_funnel_chart.js"/>
        </xpath>
    </template>
</odoo>

views\web_funnel_chaer_view.xml 把视图显示到odoo上面的一些相关操作定义

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <record id="action_funnel_chart" model="ir.actions.client">
        <field name="name">Lead Funnel Chart</field>
        <field name="tag">web_funnel_chart.funnel</field>
    </record>

    <menuitem id="FunnelCHart_main" name="Funnel Chart11"/>

    <menuitem id="menu_FunnelCHart" name="Funnel Chart22" parent="FunnelCHart_main"
              action="action_funnel_chart" />

    <record id="run_chart_tree" model="ir.ui.view">
        <field name="name">RunCHart.tree</field>
        <field name="model">run.chart</field>
        <field name="arch" type="xml">
            <tree>
                <field name="sales" />
                <field name="prices" />
                <field name="sale_date" />
            </tree>
        </field>
    </record>

    <record id="run_chart_form" model="ir.ui.view">
        <field name="name">RunCHart.form</field>
        <field name="model">run.chart</field>
        <field name="arch" type="xml">
            <form>
                <sheet>
                    <group>
                        <field name="sales" />
                        <field name="prices" />
                        <field name="sale_date" />
                    </group>
                </sheet>
            </form>
        </field>
    </record>

    <record id="action_run_chart" model="ir.actions.act_window">
        <field name="name">Run Chart</field>
        <field name="res_model">run.chart</field>
        <field name="view_type">form</field>
        <field name="view_mode">tree,form</field>
    </record>

    <menuitem id="run_chart_main_mune" name="Run Chart"
              parent="FunnelCHart_main" action="action_run_chart"
    />

</odoo>

__manifest__.py 应用的描述文件

# -*- coding: utf-8 -*-
{
    ‘name‘:‘test1‘,
    ‘category‘:‘Web‘,
    ‘author‘:‘Bruce‘,
    ‘depends‘:[],
    ‘data‘: [
        "views/templates.xml",
        "views/web_funnel_chaer_view.xml"
    ],

    ‘qweb‘: [‘static/src/xml/*.xml‘],
    ‘installable‘:True,
    ‘auto_install‘:False,
    ‘application‘:True

}
时间: 2024-10-09 20:11:18

odoo 自定义视图的相关文章

自定义视图

1.创建一个视图类实现spring的View接口,并且把视图类用@Component注解为sprinmvc组建(重要) package com.hy.springmvc.views; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Compo

iOS7新特性 ViewController转场切换(三) 自定义视图控制器容器的切换---非交互式

@继续前面的内容,这一章,主要介绍自定义ViewController容器上视图VC的切换.先来看看系统给我们提供的容器控制器 UINavigationController和UITabBarController 都有一个NSArray类型的属性viewControllers,很明显,存储的就是需要切换的视图VC.同理,我们定义一个ContainerViewController,是UIViewController的直接子类,用来作为容器依托,额,其他属性定义详见代码吧,这里不多说了.(PS:原先我进

《连载 | 物联网框架ServerSuperIO教程》- 13.自定义视图显示接口开发,满足不同的显示需求

1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架ServerSuperIO教程>2.服务实例的配置参数说明 <连载 | 物联网框架ServerSuperIO教程>- 3.设备驱动介绍 <连载 | 物联网框架ServerSuperIO教程>-4.如开发一套设备驱动,同时支持串口和网络通讯. <连载 | 物联网框架ServerSupe

UI开发----自定义视图和视图控制器(Controller)

//  Created By 郭仔  2015年04月14日21:34:01 一.自定义视图: 根据需求的不同,?自定义视图继承的类也有所不同.?一般?自定义的 视图会继承于UIView.以下是?自定义视图的要点: 1.创建?一个UIView?子类 2.在类的初始化?方法中添加?子视图 3.类的.h?文件提供?一些接?口(?方法),便于外界操作?子视图 ================== 这里以label-textfield自定义视图为例: 把Label和Textfield封装到LTView中

Android自定义视图四:定制onMeasure强制显示为方形

这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! Android自定义视图一:扩展现有的视图,添加新的XML属性 Android自定义视图二:如何绘制内容 Android自定义视图三:给自定义视图添加"流畅"的动画 Android自定义视图四:定制onMeasure强制显示为方形 上一篇开发之后的效果如上图.不过看着这张图,需要注意的不是我们自定义视图展示了什么,而是这个视图的大小和位置.你会看到这个折线图有一个特定的大小(size).这个size是怎么定的呢?现在的代

UI基本控件和自定义视图

UILabel 常用属性: UITextField 常用属性: 输入控制属性: 外观控制属性: 输入框让键盘回收的方法: 1.通过协议 (1)让AppDelegate成为输入框的代理对象 ,让TA去执行事件(AppDelegate接受输入框的协议) (2)接受了协议就要执行键盘回收的方法 (3)建立关系: 如:textField.delegate = self;(self指AppDelegate) 2.通过Tag值 (1)创建一个按钮添加触发事件,让Tag值的键盘回收 (2)按钮触发的事件方法如

封装(自定义视图) Encapsulation

封装(自定义视图) //布局注册界面 – 未使用封装版 在AppDelegate.m文件中创建 在下面创建布局界面方法 输入框设置代理之后需要在AppDelegate.m文件的上方延展后加上协议<UITextFieldDelegate> 处理键盘的触发,回收,和点击是否可以编辑 在AppDelegate.m文件中写方法

自定义视图(组合控件)

前言 Android自定义控件主要分为两种,一种是通过继承View来实现自定义控件,另一种是通过组合已有到控件来实现自定义控件,上篇文章自定义视图(继承View)我们介绍了下继承View到方式,这篇文章简单介绍下组合控件来实现自定义控件. 有些情况我们需要通过组合已有到控件来实现特定功能到控件组建,比如一个应用到题头,大概样式如下 Java代码 通过组合控件来实现自定义控件到方式,是通过继承一个ViewGrou对象来实现,比如LinearLayout, FrameLayout, Relative

ANDROID自定义视图——onMeasure流程,MeasureSpec详解

简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量--onMeasure():决定View的大小 2.布局--onLayout():决定View在ViewGroup中的位置 3.绘制--onDraw():如何绘制这个View. 而第3步的onDraw系统已经封装的很好了,基本不用我们来操心,只需要专注到1,2两个步骤就中好了. 而这篇文章就来谈谈第一步,也是十分关键得一步:"测量(Measure)" Measure(): Measure的中文意思就是测量.所以它的