Odoo中文社区可以通过以下三个域名访问:shine-it.net , odoocn.org,odoo.net.cn

原论坛用户的基本信息和发帖这里都予以保留,请注意:原论坛用户无需重新注册新用户,但是您的密码需要重置

开发人员可以登录gitter讨论组: http://gitter.im/odoo-china/Talk, 需要github账号

如果您登录系统碰到问题,请在微信公众号留言:

【分享-oe嵌入qweb】用js读取数据库数据,用类似html语言重写web报表



  • 本来是开发个报表模块,具体功能为:OE读取excel表格-web显示-导出成excel。
    做完了拿给老板看时,老板对web显示这一块大不满意(用的OE自带的form页面),觉得人性化方便做的不到位,让我重新设计web页面,于是开始了为期一个月的前端研究。

    起先是打算自己脱离OE搞个前端来显示这个报表,用的是Django做了一个页面,做的差不多时拿给老板看,老板说从OE再弹出个窗口体验性差,叫我整合进OE里,当时我就(此处省略若干字。。)

    不得已就去翻官网文档,看到这篇文档:https://doc.odoo.com/trunk/training/web_framework/
    后大有启发,决定用qweb来写这个报表。其中多亏了群里的高手指点,才得以实现呀

    看了这么久是不是着急看代码 8),嘿嘿。。

    首先从梦姑处偷了点经验,看了他的帖子:http://shine-it.net/index.php/topic,16514.0.html

    他的贴子里的我就不重复了

    先是js读取数据库:[code]start: function() {
                var self = this;
                new instance.web.Model("lcqc.date.table.smt.data").query().filter([["smt_qctable_id", "=", 139]])
                .all().then(function(result) {
                    console.log("##################the message_of_the_day result is", result);
                    self.$el.append($(QWeb.render("MessageofTheDay", {item: result})));
                });
            },[/code]
    值得注意的是得到的是一个object
    然后把参数item: result传递给qweb。
    qweb代码:
    [code]<t t-name="MessageofTheDay">
            <div class="oe_petstore_motd">
            <table>
            <t t-foreach="item" t-as="qname">
                <tr>
                <td><t t-esc="qname.date_smtqc_statistical_table"/></td>
                <td><t t-esc="qname.inspector_smtqc_st"/></td>
                ..................
                </tr>
              </t>
              </table>
        </t>[/code]
    注意qweb的name字段等与js中的关联,就不一一说了,仔细看就看出来了。

    然后就是整合进OE:
    首先是__openerp__.py中的定义:
        'data': ['qc_table_qweb.xml'],
        "js": ["static/src/js/.js"],
        "css": ["static/src/css/
    .css"],
        "qweb": ["static/src/xml/*.xml"], 
    其中qc_table_qweb.xml放在模块的根目录里,其代码:
    [code]<openerp>
        <data>
            <record model="ir.actions.client" id="action_client_example">
                <field name="name">Example Client Action</field>
                <field name="tag">example.action</field>
            </record>
    <menuitem id="qc_table_qweb_menu" name="QC报表qweb" sequence="20" parent="qc_table_menu"/>
            <menuitem action="action_client_example" id="menu_client_example" parent="qc_table_qweb_menu" name="qc_smt日报表qweb"/>
        </data>
    </openerp>[/code]

    同样注意下name字段与js的关联,才能保证正确显示。

    css:
    [code].oe_petstore_motd td,th{
        border:1px solid blue;
    }
    .oe_petstore_motd td{
        color:#F80E0E;
    }[/code]
    其实我还是建议看上面的英文文档,跟着教程一步一步走,才能把握到精髓呀!

    下面上一张效果图:



  • 本来是开发个报表模块,具体功能为:OE读取excel表格-web显示-导出成excel。
    做完了拿给老板看时,老板对web显示这一块大不满意(用的OE自带的form页面),觉得人性化方便做的不到位,让我重新设计web页面,于是开始了为期一个月的前端研究。

    起先是打算自己脱离OE搞个前端来显示这个报表,用的是Django做了一个页面,做的差不多时拿给老板看,老板说从OE再弹出个窗口体验性差,叫我整合进OE里,当时我就(此处省略若干字。。)

    不得已就去翻官网文档,看到这篇文档:https://doc.odoo.com/trunk/training/web_framework/
    后大有启发,决定用qweb来写这个报表。其中多亏了群里的高手指点,才得以实现呀

    看了这么久是不是着急看代码 8),嘿嘿。。

    首先从梦姑处偷了点经验,看了他的帖子:http://shine-it.net/index.php/topic,16514.0.html

    他的贴子里的我就不重复了

    先是js读取数据库:[code]start: function() {
                var self = this;
                new instance.web.Model("lcqc.date.table.smt.data").query().filter([["smt_qctable_id", "=", 139]])
                .all().then(function(result) {
                    console.log("##################the message_of_the_day result is", result);
                    self.$el.append($(QWeb.render("MessageofTheDay", {item: result})));
                });
            },[/code]
    值得注意的是得到的是一个object
    然后把参数item: result传递给qweb。
    qweb代码:
    [code]<t t-name="MessageofTheDay">
            <div class="oe_petstore_motd">
            <table>
            <t t-foreach="item" t-as="qname">
                <tr>
                <td><t t-esc="qname.date_smtqc_statistical_table"/></td>
                <td><t t-esc="qname.inspector_smtqc_st"/></td>
                ..................
                </tr>
              </t>
              </table>
        </t>[/code]
    注意qweb的name字段等与js中的关联,就不一一说了,仔细看就看出来了。

    然后就是整合进OE:
    首先是__openerp__.py中的定义:
        'data': ['qc_table_qweb.xml'],
        "js": ["static/src/js/.js"],
        "css": ["static/src/css/
    .css"],
        "qweb": ["static/src/xml/*.xml"], 
    其中qc_table_qweb.xml放在模块的根目录里,其代码:
    [code]<openerp>
        <data>
            <record model="ir.actions.client" id="action_client_example">
                <field name="name">Example Client Action</field>
                <field name="tag">example.action</field>
            </record>
    <menuitem id="qc_table_qweb_menu" name="QC报表qweb" sequence="20" parent="qc_table_menu"/>
            <menuitem action="action_client_example" id="menu_client_example" parent="qc_table_qweb_menu" name="qc_smt日报表qweb"/>
        </data>
    </openerp>[/code]

    同样注意下name字段与js的关联,才能保证正确显示。

    css:
    [code].oe_petstore_motd td,th{
        border:1px solid blue;
    }
    .oe_petstore_motd td{
        color:#F80E0E;
    }[/code]
    其实我还是建议看上面的英文文档,跟着教程一步一步走,才能把握到精髓呀!

    下面上一张效果图:



  • 先贊一下,

    暂时看不懂



  • 历害哦。


  • 管理员

    分享的很完整,谢谢!



  • 结合 上面几篇文章  掉坑了,然后 找老刘 要了 样例  bzr branch lp:~niv-openerp/+junk/oepetstore -r 1

    然后从坑里 爬了出来

    安装 这个  教程 https://doc.odoo.com/trunk/training/web_framework/

    看 楼主的 顺序 ,没理解前都会copy  看看 能不能运行。。  js  ,xml 写了,然后掉坑里了

    1、出菜单 ,贴代码[code]<?xml version="1.0" encoding="utf-8"?>
    <openerp>
        <data>
          <!-- Top menu item -->
            <menuitem name="Test"
                id="menu_test_root"
           
                sequence="30"/>
        <record model="ir.actions.client" id="action_client_example">
                <field name="name">Example Client Action</field>
      <!-- 此处 name  修改了 浏览器 title    -->
              <field name="tag">petstore.homepage</field>
            <!-- 此处 tag 内容 要对应  js   
            instance.web.client_actions.add('petstore.homepage', 'instance.oepetstore.HomePage');

    这个 阿狸木有 解释,或者不解释 。

    济南-stone  提示 过 , “找action.tag是否写对”  结果不得要领
    看了样例才知道
            -->
               
            </record>
    <!-- 此处 tag 内容 要对应  js    这个 阿狸木有 解释,或者不解释 。
      -->
            <menuitem id="test_qweb_menu" name="test qweb" sequence="20" parent="menu_test_root"/>
            <menuitem action="action_client_example" id="menu_client_example" parent="test_qweb_menu" name="test report qweb"/>
        </data>
    </openerp>[/code]




    2 、js 代码


    [code]
    openerp.oepetstore = function(instance) {
        var _t = instance.web._t,
            _lt = instance.web._lt;
        var QWeb = instance.web.qweb;

        instance.oepetstore = {};

    /*  instance.oepetstore.HomePage = instance.web.Widget.extend({
            start: function() {
                console.log("pet store home page loaded");
            },
        });
        */
        instance.oepetstore.HomePage = instance.web.Widget.extend({
            start: function() {
                var self = this;
                var model = new instance.web.Model("message_of_the_day");
    //message_of_the_day  是py 定义了一个 类 
    //下面的 my_method  在py 类message_of_the_day    里有定义
                model.call("my_method", [], {context: new instance.web.CompoundContext()}).then(function(result) {
                    self.$el.append("<div>Hello " + result["hello"] + "</div>");
                    // will show "Hello world" to the user
                });
            },
        });
    // instance.oepetstore.btn_start  是 copy 梦菇的 代码 ,木有 调用
        instance.oepetstore.btn_start = function() {
            var self = this;
            alert('test');
            return false;
        };
       
     
        function aaa(){
            alert(123);
        }
        // 这里 定义了 ,然后  xml 里 才能调用      <field name="tag">petstore.homepage</field>
        instance.web.client_actions.add('petstore.homepage', 'instance.oepetstore.HomePage');
       
        instance.web.client_actions.add('bt_start', 'instance.oepetstore.btn_start');


    }
    [/code]


    3、贴下 py 代码

    [code]
    from openerp.osv import osv, fields
    # 通过 js 
    # var model = new instance.web.Model("message_of_the_day");
    # 调用 该类
    class message_of_the_day(osv.osv):
        _name = "message_of_the_day"

    #通过  js
    #  model.call("my_method", [], {context: new instance.web.CompoundContext()}).then(function(result) {
    #                self.$el.append("<div>Hello " + result["hello"] + "</div>");
    # 调用  下面 方法  通过 model.call ("my_method", ....
        def my_method(self, cr, uid, context=None):
            return {"hello": "world"}

        _columns = {
            'message': fields.text(string="Message"),
            'color': fields.char(string="Color", size=20),
        }
    [/code]

    这样 界面可以出  hello  world



  • [quote author=行云流水 link=topic=16554.msg28741#msg28741 date=1408090429]
    结合 上面几篇文章  掉坑了,然后 找老刘 要了 样例  bzr branch lp:~niv-openerp/+junk/oepetstore -r 1

    然后从坑里 爬了出来

    安装 这个  教程 https://doc.odoo.com/trunk/training/web_framework/

    看 楼主的 顺序 ,没理解前都会copy  看看 能不能运行。。  js  ,xml 写了,然后掉坑里了

    1、出菜单 ,贴代码[code]<?xml version="1.0" encoding="utf-8"?>
    <openerp>
        <data>
          <!-- Top menu item -->
            <menuitem name="Test"
                id="menu_test_root"
           
                sequence="30"/>
        <record model="ir.actions.client" id="action_client_example">
                <field name="name">Example Client Action</field>
      <!-- 此处 name  修改了 浏览器 title    -->
              <field name="tag">petstore.homepage</field>
            <!-- 此处 tag 内容 要对应  js   
            instance.web.client_actions.add('petstore.homepage', 'instance.oepetstore.HomePage');

    这个 阿狸木有 解释,或者不解释 。

    济南-stone  提示 过 , “找action.tag是否写对”  结果不得要领
    看了样例才知道
            -->
               
            </record>
    <!-- 此处 tag 内容 要对应  js    这个 阿狸木有 解释,或者不解释 。
      -->
            <menuitem id="test_qweb_menu" name="test qweb" sequence="20" parent="menu_test_root"/>
            <menuitem action="action_client_example" id="menu_client_example" parent="test_qweb_menu" name="test report qweb"/>
        </data>
    </openerp>[/code]



    这样 界面可以出  hello  world

    [/quote]

    我上面说了, 注意qweb的name字段等与js中的关联,就不一一说了,仔细看就看出来了。

    。。。

    PS: 你这坑掉的可真深啊 ;D



  • 具体怎么把读取数据后的表格导出成一个excel文件呢?谢谢!



  • 学习一下,用这种方式做报表似乎还是很方便的。。。



  • [quote author=神仙采葡萄 link=topic=16554.msg28959#msg28959 date=1410492180]
    具体怎么把读取数据后的表格导出成一个excel文件呢?谢谢!
    [/quote]
    开发导出模块,大概就是用python读取数据库然后导出成excel。
    一般用xlrd等



  • 多谢分享


登录后回复
 

与 Odoo 中文社区 的连接断开,我们正在尝试重连,请耐心等待