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。<br />做完了拿给老板看时,老板对web显示这一块大不满意(用的OE自带的form页面),觉得人性化方便做的不到位,让我重新设计web页面,于是开始了为期一个月的前端研究。<br /><br />起先是打算自己脱离OE搞个前端来显示这个报表,用的是Django做了一个页面,做的差不多时拿给老板看,老板说从OE再弹出个窗口体验性差,叫我整合进OE里,当时我就(此处省略若干字。。)<br /><br />不得已就去翻官网文档,看到这篇文档:https://doc.odoo.com/trunk/training/web_framework/<br />后大有启发,决定用qweb来写这个报表。其中多亏了群里的高手指点,才得以实现呀<br /><br />看了这么久是不是着急看代码 8),嘿嘿。。<br /><br />首先从梦姑处偷了点经验,看了他的帖子:http://shine-it.net/index.php/topic,16514.0.html<br /><br />他的贴子里的我就不重复了<br /><br />先是js读取数据库:[code]start: function() {<br />            var self = this;<br />            new instance.web.Model("lcqc.date.table.smt.data").query().filter([["smt_qctable_id", "=", 139]])<br />            .all().then(function(result) {<br />                console.log("##################the message_of_the_day result is", result);<br />                self.$el.append($(QWeb.render("MessageofTheDay", {item: result})));<br />            });<br />        },[/code]<br />值得注意的是得到的是一个object<br />然后把参数item: result传递给qweb。<br />qweb代码:<br />[code]<t t-name="MessageofTheDay"><br />        <div class="oe_petstore_motd"><br />        <table><br />        <t t-foreach="item" t-as="qname"><br />            <tr><br />            <td><t t-esc="qname.date_smtqc_statistical_table"/></td><br />            <td><t t-esc="qname.inspector_smtqc_st"/></td><br />            ..................<br />            </tr><br />          </t><br />          </table><br />    </t>[/code]<br />注意qweb的name字段等与js中的关联,就不一一说了,仔细看就看出来了。<br /><br />然后就是整合进OE:<br />首先是__openerp__.py中的定义:<br />    'data': ['qc_table_qweb.xml'], <br />    "js": ["static/src/js/.js"],<br />    "css": ["static/src/css/.css"],<br />    "qweb": ["static/src/xml/*.xml"],  <br />其中qc_table_qweb.xml放在模块的根目录里,其代码:<br />[code]<openerp><br />    <data><br />        <record model="ir.actions.client" id="action_client_example"><br />            <field name="name">Example Client Action</field><br />            <field name="tag">example.action</field><br />        </record><br /> <menuitem id="qc_table_qweb_menu" name="QC报表qweb" sequence="20" parent="qc_table_menu"/><br />        <menuitem action="action_client_example" id="menu_client_example" parent="qc_table_qweb_menu" name="qc_smt日报表qweb"/><br />    </data><br /></openerp>[/code]<br /><br />同样注意下name字段与js的关联,才能保证正确显示。<br /><br />css:<br />[code].oe_petstore_motd td,th{<br />    border:1px solid blue;<br />}<br />.oe_petstore_motd td{<br />    color:#F80E0E;<br />}[/code]<br />其实我还是建议看上面的英文文档,跟着教程一步一步走,才能把握到精髓呀!<br /><br />下面上一张效果图:



  • 本来是开发个报表模块,具体功能为:OE读取excel表格-web显示-导出成excel。<br />做完了拿给老板看时,老板对web显示这一块大不满意(用的OE自带的form页面),觉得人性化方便做的不到位,让我重新设计web页面,于是开始了为期一个月的前端研究。<br /><br />起先是打算自己脱离OE搞个前端来显示这个报表,用的是Django做了一个页面,做的差不多时拿给老板看,老板说从OE再弹出个窗口体验性差,叫我整合进OE里,当时我就(此处省略若干字。。)<br /><br />不得已就去翻官网文档,看到这篇文档:https://doc.odoo.com/trunk/training/web_framework/<br />后大有启发,决定用qweb来写这个报表。其中多亏了群里的高手指点,才得以实现呀<br /><br />看了这么久是不是着急看代码 8),嘿嘿。。<br /><br />首先从梦姑处偷了点经验,看了他的帖子:http://shine-it.net/index.php/topic,16514.0.html<br /><br />他的贴子里的我就不重复了<br /><br />先是js读取数据库:[code]start: function() {<br />            var self = this;<br />            new instance.web.Model("lcqc.date.table.smt.data").query().filter([["smt_qctable_id", "=", 139]])<br />            .all().then(function(result) {<br />                console.log("##################the message_of_the_day result is", result);<br />                self.$el.append($(QWeb.render("MessageofTheDay", {item: result})));<br />            });<br />        },[/code]<br />值得注意的是得到的是一个object<br />然后把参数item: result传递给qweb。<br />qweb代码:<br />[code]<t t-name="MessageofTheDay"><br />        <div class="oe_petstore_motd"><br />        <table><br />        <t t-foreach="item" t-as="qname"><br />            <tr><br />            <td><t t-esc="qname.date_smtqc_statistical_table"/></td><br />            <td><t t-esc="qname.inspector_smtqc_st"/></td><br />            ..................<br />            </tr><br />          </t><br />          </table><br />    </t>[/code]<br />注意qweb的name字段等与js中的关联,就不一一说了,仔细看就看出来了。<br /><br />然后就是整合进OE:<br />首先是__openerp__.py中的定义:<br />    'data': ['qc_table_qweb.xml'], <br />    "js": ["static/src/js/.js"],<br />    "css": ["static/src/css/.css"],<br />    "qweb": ["static/src/xml/*.xml"],  <br />其中qc_table_qweb.xml放在模块的根目录里,其代码:<br />[code]<openerp><br />    <data><br />        <record model="ir.actions.client" id="action_client_example"><br />            <field name="name">Example Client Action</field><br />            <field name="tag">example.action</field><br />        </record><br /> <menuitem id="qc_table_qweb_menu" name="QC报表qweb" sequence="20" parent="qc_table_menu"/><br />        <menuitem action="action_client_example" id="menu_client_example" parent="qc_table_qweb_menu" name="qc_smt日报表qweb"/><br />    </data><br /></openerp>[/code]<br /><br />同样注意下name字段与js的关联,才能保证正确显示。<br /><br />css:<br />[code].oe_petstore_motd td,th{<br />    border:1px solid blue;<br />}<br />.oe_petstore_motd td{<br />    color:#F80E0E;<br />}[/code]<br />其实我还是建议看上面的英文文档,跟着教程一步一步走,才能把握到精髓呀!<br /><br />下面上一张效果图:



  • 先贊一下,<br /><br />暂时看不懂



  • 历害哦。


  • 管理员

    分享的很完整,谢谢!



  • 结合 上面几篇文章  掉坑了,然后 找老刘 要了 样例  bzr branch lp:~niv-openerp/+junk/oepetstore -r 1<br /><br />然后从坑里 爬了出来<br /><br />安装 这个  教程 https://doc.odoo.com/trunk/training/web_framework/<br /><br />看 楼主的 顺序 ,没理解前都会copy  看看 能不能运行。。  js  ,xml 写了,然后掉坑里了<br /><br /> 1、出菜单 ,贴代码[code]<?xml version="1.0" encoding="utf-8"?><br /><openerp><br />    <data><br />      <!-- Top menu item --><br />        <menuitem name="Test"<br />            id="menu_test_root"<br />        <br />            sequence="30"/><br />    <record model="ir.actions.client" id="action_client_example"><br />            <field name="name">Example Client Action</field><br />  <!-- 此处 name  修改了 浏览器 title    --><br />          <field name="tag">petstore.homepage</field><br />        <!-- 此处 tag 内容 要对应  js    <br />        instance.web.client_actions.add('petstore.homepage', 'instance.oepetstore.HomePage');<br /><br />这个 阿狸木有 解释,或者不解释 。<br /><br />济南-stone  提示 过 , “找action.tag是否写对”  结果不得要领<br />看了样例才知道<br />        --><br />            <br />        </record><br /> <!-- 此处 tag 内容 要对应  js    这个 阿狸木有 解释,或者不解释 。<br />  --><br />        <menuitem id="test_qweb_menu" name="test qweb" sequence="20" parent="menu_test_root"/><br />        <menuitem action="action_client_example" id="menu_client_example" parent="test_qweb_menu" name="test report qweb"/><br />    </data><br /></openerp>[/code]<br /><br /><br /><br /><br />2 、js 代码<br /><br /><br />[code]<br />openerp.oepetstore = function(instance) {<br />    var _t = instance.web._t,<br />        _lt = instance.web._lt;<br />    var QWeb = instance.web.qweb;<br /><br />    instance.oepetstore = {};<br /><br /> /*  instance.oepetstore.HomePage = instance.web.Widget.extend({<br />        start: function() {<br />            console.log("pet store home page loaded");<br />        },<br />    });<br />    */<br />    instance.oepetstore.HomePage = instance.web.Widget.extend({<br />        start: function() {<br />            var self = this;<br />            var model = new instance.web.Model("message_of_the_day");<br />//message_of_the_day  是py 定义了一个 类  <br />//下面的 my_method  在py 类message_of_the_day    里有定义<br />            model.call("my_method", [], {context: new instance.web.CompoundContext()}).then(function(result) {<br />                self.$el.append("<div>Hello " + result["hello"] + "</div>");<br />                // will show "Hello world" to the user<br />            });<br />        },<br />    });<br />// instance.oepetstore.btn_start  是 copy 梦菇的 代码 ,木有 调用<br />    instance.oepetstore.btn_start = function() {<br />        var self = this;<br />        alert('test');<br />        return false;<br />    };<br />    <br />  <br />    function aaa(){<br />        alert(123);<br />    }<br />    // 这里 定义了 ,然后  xml 里 才能调用      <field name="tag">petstore.homepage</field><br />    instance.web.client_actions.add('petstore.homepage', 'instance.oepetstore.HomePage');<br />    <br />    instance.web.client_actions.add('bt_start', 'instance.oepetstore.btn_start');<br /><br /><br />}<br />[/code]<br /><br /><br />3、贴下 py 代码<br /><br />[code]<br />from openerp.osv import osv, fields<br /># 通过 js  <br /># var model = new instance.web.Model("message_of_the_day");<br /># 调用 该类 <br />class message_of_the_day(osv.osv):<br />    _name = "message_of_the_day"<br /><br />#通过  js <br />#  model.call("my_method", [], {context: new instance.web.CompoundContext()}).then(function(result) {<br />#                self.$el.append("<div>Hello " + result["hello"] + "</div>");<br /># 调用  下面 方法  通过 model.call ("my_method", ....<br />    def my_method(self, cr, uid, context=None):<br />        return {"hello": "world"}<br /><br />    _columns = {<br />        'message': fields.text(string="Message"),<br />        'color': fields.char(string="Color", size=20),<br />    }<br />[/code]<br /><br /> 这样 界面可以出  hello  world<br />



  • [quote author=行云流水 link=topic=16554.msg28741#msg28741 date=1408090429]<br />结合 上面几篇文章  掉坑了,然后 找老刘 要了 样例  bzr branch lp:~niv-openerp/+junk/oepetstore -r 1<br /><br />然后从坑里 爬了出来<br /><br />安装 这个  教程 https://doc.odoo.com/trunk/training/web_framework/<br /><br />看 楼主的 顺序 ,没理解前都会copy  看看 能不能运行。。  js  ,xml 写了,然后掉坑里了<br /><br /> 1、出菜单 ,贴代码[code]<?xml version="1.0" encoding="utf-8"?><br /><openerp><br />    <data><br />      <!-- Top menu item --><br />        <menuitem name="Test"<br />            id="menu_test_root"<br />        <br />            sequence="30"/><br />    <record model="ir.actions.client" id="action_client_example"><br />            <field name="name">Example Client Action</field><br />  <!-- 此处 name  修改了 浏览器 title    --><br />          <field name="tag">petstore.homepage</field><br />        <!-- 此处 tag 内容 要对应  js    <br />        instance.web.client_actions.add('petstore.homepage', 'instance.oepetstore.HomePage');<br /><br />这个 阿狸木有 解释,或者不解释 。<br /><br />济南-stone  提示 过 , “找action.tag是否写对”  结果不得要领<br />看了样例才知道<br />        --><br />            <br />        </record><br /> <!-- 此处 tag 内容 要对应  js    这个 阿狸木有 解释,或者不解释 。<br />  --><br />        <menuitem id="test_qweb_menu" name="test qweb" sequence="20" parent="menu_test_root"/><br />        <menuitem action="action_client_example" id="menu_client_example" parent="test_qweb_menu" name="test report qweb"/><br />    </data><br /></openerp>[/code]<br /><br /><br /><br /> 这样 界面可以出  hello  world<br /><br />[/quote]<br /><br />我上面说了, 注意qweb的name字段等与js中的关联,就不一一说了,仔细看就看出来了。<br /><br />。。。<br /><br />PS: 你这坑掉的可真深啊 ;D



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



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



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



  • 多谢分享


登录后回复
 

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