9.0社区版中开发自定义widget
-
在FORM报表中添加饼状图的方法
无锡特迪 [email protected] QQ:85920312
在ODOO9.0社区版中对JS的调用方式略有变化，简单介绍下如何通过JS自定义控件。
创建目录
在模块下创建"static/src/js/"目录用来存放JS文件，如果需要用到QWEB模板的话应该再建一个“static/src/view”,名称可自行定义。
添加JS文件
这里添加一个名为"widgets.js"的文件，具体9.0下的语法可参考官方文档（注意9.0下的那个和petstore有关的文档都没有更新，JS的语法有些变化.饼状图使用了Highcharts的JS报表，具体使用方法可参考文档.<br /> odoo.define('crm_cm.crm_cm', function (require) {<br />"use strict";<br /><br />var core = require('web.core');<br />var form_common = require('web.form_common');<br />var formats = require('web.formats');<br />var Model = require('web.Model');<br /><br />var _t = core._t;<br />var QWeb = core.qweb;<br /><br />var BarChart = form_common.AbstractField.extend({<br />render_value:function(){<br /> var self = this;<br /> console.log(this.get("value"));<br /> //这里的value对于one2many字段来讲就是多个Id数组，如[1,5,3]<br /> var line_ids = this.get("value");<br /> var mod = new Model("crm.cm.asset.allocation.result.line");<br /><br /> mod.query(["rule_name","rule_percent","amount"])<br /> .filter([['id','in',line_ids]])<br /> .all().then(function(lines){<br /> console.log(lines);<br /> var data = lines.map(function(item,index){return [item.rule_name,item.amount];});<br /> self.$el.highcharts({<br /> chart: {<br /> type: 'pie',<br /> options3d: {<br /> enabled: true,<br /> alpha: 45,<br /> beta: 0<br /> }<br /> },<br /> title: {<br /> text: ''<br /> },<br /> tooltip: {<br /> pointFormat: '{series.name}{point.amount}: <b>{point.percentage:.1f}%</b>'<br /> },<br /> plotOptions: {<br /> pie: {<br /> allowPointSelect: true,<br /> cursor: 'pointer',<br /> depth: 35,<br /> dataLabels: {<br /> enabled: true,<br /> format: '{point.name}-{point.percentage:.1f}%'<br /> }<br /> }<br /> },<br /> series: [{<br /> type: 'pie',<br /> name: '占比',<br /> data: data<br /> }]<br /> });<br /> });<br /> }<br />});<br /><br />//这句话一定要有，要不然找不到这个控件的<br />core.form_widget_registry.add("barchart",BarChart);<br />});<br /><br />
将JS文件在头部进行引用
在模块的views文件中添加一个assets.xml文件，内容如下：<br /> <?xml version="1.0" encoding="utf-8"?><br /><openerp><br /> <data><br /> <template id="assets_backend" name="crm_cm_assets2" inherit_id="web.assets_backend"><br /> <xpath expr="." position="inside"><br /> <script type="text/javascript" src="/crm_cm/static/src/js/widgets.js"></script><br /> <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"/><br /> </xpath><br /> </template><br /> </data><br /></openerp><br /><br />在openerp.py的data中添加涉及到的文件<br /><br /> 'data': [<br /> #其他视图省略<br /> "views/assets.xml",<br /> #"report/gold_report.xml",<br />],<br />
在FORM中使用饼状图控件
在FORM视图中使用上面的饼图控件，将fields的widget属性设为"barchart"就可以了，我目前是用在one2many字段上的。代码如下：<br /> <group string="Asset Allocation Result Line"><br /> <field name="result_lines_2" nolabel="1"><br /> <tree string="Asset Allocation Result Line"><br /> <field name="rule_id"/><br /> <field name="rule_percent"/><br /> <field name="amount"/><br /> </tree><br /> </field><br /> </group><br /><br /> <group string="Bar Chart"><br /> <field name="result_lines" widget="barchart" nolabel="1"/><br /> </group><br />
注意事项
我目前只在one2many字段上测试过，而且引用了外部的highcharts，有其他朋友建议可以使用odoo中原有的饼图控件nvd3，有空研究下。另外 result_lines_2 字段是个冗余字段，只是用在同时展示列表和饼图时使用，因为测试过程中发现界面上对一个字段展示两次的时候有可能不显示，具体原因尚未研究出来。这样的用法应该也只能用在one2many字段上，代码如下：<br />result_lines = fields.One2many("crm.cm.asset.allocation.result.line","result_id",string="Asset Allocation Result Line")<br />result_lines_2 = fields.One2many("crm.cm.asset.allocation.result.line","result_id",string="Asset Allocation Result Line")<br />
