【分享-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:///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 上午 作者 阿狸 »