[分享]buke 分享的一个关于自定义 widget 的例子.
-
先看看最终效果:
Page 页效果:
[attachimg=1]
编辑页效果:
[attachimg=2]
相关 view xml:<br />....<br /> <field name="website" position="after"><br /> <field name="qq" widget="qq"/><br /> </field><br />....<br />
模块核心文件结构:
openerp.py
static/src/js/web_qq_widget.js
static/src/xml/web_qq_widget.xml
openerp.py 文件:<br />....<br />{<br /> 'name': 'rundex',<br /> 'version': '0.1',<br /> 'category': 'Sales Management',<br /> 'description': """<br />....<br /> 'js': [<br /> 'static/src/js/*.js',<br /> ],<br /> 'css': [<br /> ],<br /> 'qweb': [<br /> 'static/src/xml/*.xml',<br /> ],<br />....<br />
web_qq_widget.xml 文件:<br />....<br /><template><br /> <t t-name="QqWidget"><br /> <span class="oe_form_field oe_form_field_url" t-att-style="widget.node.attrs.style"><br /> <span class="oe_form_qq" t-if="widget.get('effective_readonly')"><br /> <a href="#" class="oe_form_uri" target="_blank"/><br /> <span class="qq_number"></span><br /> </span><br /><br /> <t t-if="!widget.get('effective_readonly')"><br /> <div><br /> <input type="text" t-att-id="widget.id_for_label" t-att-tabindex="widget.node.attrs.tabindex" t-att-autofocus="widget.node.attrs.autofocus" t-att-placeholder="widget.node.attrs.placeholder" t-att-maxlength="widget.field.size" /><br /> </div><br /> </t><br /> </span><br /> </t><br /></template><br />....<br />
web_qq_widget.js 文件:<br />....<br />openerp.rundex = function(instance){<br /> var _t = instance.web._t, _lt = instance.web._lt;<br /> var QWeb = instance.web.qweb;<br /> instance.web.form.widgets.add('qq', 'instance.rundex.QqWidget');<br /> instance.rundex.QqWidget = instance.web.form.FieldChar.extend({<br /> display_name : _lt('QqWidget'),<br /> template: "QqWidget",<br /><br /> render_value: function(){<br /> if (!this.get("effective_readonly")){<br /> this._super();<br /> }else{<br /> if (this.get('value')){<br /> this.$el.find('a').attrs('href', 'http://wpa.qq.com/msgrd?v=3&uid=' + this.get('value') + '&site=qq&menu=yes').html('<img border="0" src="http://pub.idqqimg.com/wpa/images/counseling_style_52.png" alt="' + this.get('value') + '" title="' +this.get('value') + '"/>');<br /> this.$el.find(".qq_number").text(this.get('value'));<br /> }else{<br /> this.$el.find('a').attr('href', '#').html('');<br /> this.$el.find(".qq_number").text();<br /> }<br /> }<br /> },<br /> });<br />};<br />....<br />
注: rundex 为模块名
模板文件中注意: t-if="widget.get('effective_readonly')" effective_readonly = true 表示编辑状态
特此感谢 buke(广州-步科) 同学的分享.. 大家鼓掌... -
总监辛苦了,多谢各位捧场 ~
代码整理了下,做成了2个小模块,请大家笑纳
https://github.com/buke/openerp-custom-widget-qq -
谢谢 步科, 谢谢总监