您的位置：首页 > 数据库

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

2016-04-05 00:27 633 查看

【分享-oe嵌入qweb】用js读取数据库数据，用类似html语言重写web报表 (阅读 4403 次)

阿狸

新手上路

帖子: 26
人气： 1

开启阅读模式

【分享-oe嵌入qweb】用js读取数据库数据，用类似html语言重写web报表
« 于: 八月 12, 2014, 11:49:54 上午 »

本来是开发个报表模块，具体功能为：OE读取excel表格-web显示-导出成excel。

做完了拿给老板看时，老板对web显示这一块大不满意（用的OE自带的form页面），觉得人性化方便做的不到位，让我重新设计web页面，于是开始了为期一个月的前端研究。

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

不得已就去翻官网文档，看到这篇文档：https://doc.odoo.com/trunk/training/web_framework/

后大有启发，决定用qweb来写这个报表。其中多亏了群里的高手指点，才得以实现呀

看了这么久是不是着急看代码

，嘿嘿。。

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

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

先是js读取数据库：

程序代码: [选择]

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})));
            });
        },

值得注意的是得到的是一个object

然后把参数item: result传递给qweb。

qweb代码：

程序代码: [选择]

<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>

注意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放在模块的根目录里，其代码：

程序代码: [选择]

<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>

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

css:

程序代码: [选择]

.oe_petstore_motd td,th{
    border:1px solid blue;
}
.oe_petstore_motd td{
    color:#F80E0E;
}

其实我还是建议看上面的英文文档，跟着教程一步一步走，才能把握到精髓呀！

下面上一张效果图：

QQ截图20140812114444.png (144
kB, 1358x682 - 已被阅读 909 次.)

« 最后编辑时间: 八月 12, 2014, 11:54:09 上午作者阿狸 »

已记录

ccdos

布道达人

帖子: 463
人气： 0

Re:
【分享-oe嵌入qweb】用js读取数据库数据，用类似html语言重写web报表
« 回复 #1 于: 八月 12, 2014, 11:59:31 上午 »

先贊一下，

暂时看不懂

已记录

winson97

新手上路

帖子: 30
人气： 1

Re:
【分享-oe嵌入qweb】用js读取数据库数据，用类似html语言重写web报表
« 回复 #2 于: 八月 12, 2014, 12:03:27 下午 »

历害哦。

已记录

digitalsatori

论坛管理员
论坛元老

帖子: 1253
人气： 51

Re:
【分享-oe嵌入qweb】用js读取数据库数据，用类似html语言重写web报表
« 回复 #3 于: 八月 12, 2014, 04:43:27 下午 »

分享的很完整，谢谢！

已记录

OpenERP高级实施顾问

上海先安科技 (http://cn.openerp.cn)

tony AT openerp.cn

021 50323731

行云流水

小试牛刀

帖子: 59
人气： 0

Re:
【分享-oe嵌入qweb】用js读取数据库数据，用类似html语言重写web报表
« 回复 #4 于: 八月 15, 2014, 04:13:49 下午 »

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

然后从坑里爬了出来

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

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

1、出菜单，贴代码

程序代码: [选择]

<?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>

2 、js 代码

程序代码: [选择]

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');

}

3、贴下 py 代码

程序代码: [选择]

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),
    }

这样界面可以出 hello world

« 最后编辑时间: 八月 15, 2014, 04:25:00 下午作者行云流水 »

已记录

阿狸

新手上路

帖子: 26
人气： 1

Re:
【分享-oe嵌入qweb】用js读取数据库数据，用类似html语言重写web报表
« 回复 #5 于: 八月 19, 2014, 06:21:51 下午 »

引用自: 行云流水于八月 15, 2014, 04:13:49 下午

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

然后从坑里爬了出来

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

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

1、出菜单，贴代码

程序代码: [选择]

<?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>

这样界面可以出 hello world

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

。。。

PS: 你这坑掉的可真深啊

« 最后编辑时间: 八月 19, 2014, 06:23:52 下午作者阿狸 »

已记录

神仙采葡萄

新手上路

帖子: 3
人气： 0

Re:
【分享-oe嵌入qweb】用js读取数据库数据，用类似html语言重写web报表
« 回复 #6 于: 九月 12, 2014, 11:23:00 上午 »

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

已记录

zxq1207

新手上路

帖子: 6
人气： 0

Re:
【分享-oe嵌入qweb】用js读取数据库数据，用类似html语言重写web报表
« 回复 #7 于: 十月 25, 2014, 11:40:51 上午 »

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

已记录

阿狸

新手上路

帖子: 26
人气： 1

Re:
【分享-oe嵌入qweb】用js读取数据库数据，用类似html语言重写web报表
« 回复 #8 于: 十月 31, 2014, 02:29:05 下午 »

引用自: 神仙采葡萄于九月 12, 2014, 11:23:00 上午

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

开发导出模块，大概就是用python读取数据库然后导出成excel。

一般用xlrd等

已记录

aornor

新手上路

帖子: 29
人气： 0

Re:
【分享-oe嵌入qweb】用js读取数据库数据，用类似html语言重写web报表
« 回复 #9 于: 十一月 07, 2014, 11:02:33 上午 »

多谢分享

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航