odoo openerp 分享-oe嵌入qweb】用js读取数据库数据,用类似html语言重写web报表
2016-04-05 00:27
696 查看
【分享-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 上午 »
多谢分享
相关文章推荐
- PHP如何使用Memcached
- mysql if
- Spring+spring mvc+redis+mybatis+PageHelper
- 防止sql注入等的危险
- sql 整理
- Navicat for Oracle的表触发器有哪些属性
- 谈谈Navicat for Oracle 表栏位的使用
- 如何还原Navicat for SQL Server的备份数据
- mongodb sharding集群配置
- mongodb shard集群扩容和收缩
- 编译安装redis
- redis 动态修改配置
- 转- OS X 下 TAR.GZ 方式安装 MySQL
- Mac OS X 下 TAR.GZ 方式安装 MySQL 5.7
- 当MySQL服务突然消失的时候
- redis 该端口,设置认证
- mysql5.7 版本中 timestamp 不能为零日期 以及sql_mode合理设置
- 设置MYSQL数据库编码为UTF-8
- redis常见性能问题和解决方案?
- 跟我一起学习MySQL技术内幕(第五版):(第一章学习日记7下)