【分享-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读取数据库：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 /> },
值得注意的是得到的是一个object
然后把参数item: result传递给qweb。
qweb代码：<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>
注意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><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>
同样注意下name字段与js的关联，才能保证正确显示。
css:.oe_petstore_motd td,th{<br /> border:1px solid blue;<br />}<br />.oe_petstore_motd td{<br /> color:#F80E0E;<br />}
其实我还是建议看上面的英文文档，跟着教程一步一步走，才能把握到精髓呀！
下面上一张效果图： -
分享的很完整，谢谢！
-
结合 上面几篇文章 掉坑了，然后 找老刘 要了 样例 bzr branch lp:~niv-openerp/+junk/oepetstore -r 1
然后从坑里 爬了出来
安装 这个 教程 [检测到链接无效，已移除] br />
看 楼主的 顺序 ，没理解前都会copy 看看 能不能运行。。 js ,xml 写了，然后掉坑里了
1、出菜单 ，贴代码<?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>
2 、js 代码<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 />
3、贴下 py 代码<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 />
这样 界面可以出 hello world -
[quote author=行云流水 link=topic=16554.msg28741#msg28741 date=1408090429]
结合 上面几篇文章 掉坑了，然后 找老刘 要了 样例 bzr branch lp:~niv-openerp/+junk/oepetstore -r 1
然后从坑里 爬了出来
安装 这个 教程 [检测到链接无效，已移除] br />
看 楼主的 顺序 ，没理解前都会copy 看看 能不能运行。。 js ,xml 写了，然后掉坑里了
1、出菜单 ，贴代码<?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>
这样 界面可以出 hello world
[/quote]
我上面说了， 注意qweb的name字段等与js中的关联，就不一一说了，仔细看就看出来了。
。。。
PS: 你这坑掉的可真深啊 ;D
