[分享]buke 分享的一个关于自定义 widget 的例子.

[mrshelly]

先看看最终效果:
Page 页效果:
[attachimg=1]
编辑页效果:
[attachimg=2]

相关 view xml:

<br />....<br />&nbsp; &nbsp; &nbsp; &nbsp; &lt;field name=&quot;website&quot; position=&quot;after&quot;&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;field name=&quot;qq&quot; widget=&quot;qq&quot;/&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &lt;/field&gt;<br />....<br />

模块核心文件结构:
openerp.py
static/src/js/web_qq_widget.js
static/src/xml/web_qq_widget.xml

openerp.py 文件:

<br />....<br />{<br />&nbsp; &nbsp; &#039;name&#039;: &#039;rundex&#039;,<br />&nbsp; &nbsp; &#039;version&#039;: &#039;0.1&#039;,<br />&nbsp; &nbsp; &#039;category&#039;: &#039;Sales Management&#039;,<br />&nbsp; &nbsp; &#039;description&#039;: &quot;&quot;&quot;<br />....<br />&nbsp; &nbsp; &#039;js&#039;: [<br />&nbsp; &nbsp; &nbsp; &nbsp; &#039;static/src/js/*.js&#039;,<br />&nbsp; &nbsp; ],<br />&nbsp; &nbsp; &#039;css&#039;: [<br />&nbsp; &nbsp; ],<br />&nbsp; &nbsp; &#039;qweb&#039;: [<br />&nbsp; &nbsp; &nbsp; &nbsp; &#039;static/src/xml/*.xml&#039;,<br />&nbsp; &nbsp; ],<br />....<br />

web_qq_widget.xml 文件:

<br />....<br />&lt;template&gt;<br />&nbsp; &nbsp; &lt;t t-name=&quot;QqWidget&quot;&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;oe_form_field oe_form_field_url&quot; t-att-style=&quot;widget.node.attrs.style&quot;&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;oe_form_qq&quot; t-if=&quot;widget.get(&#039;effective_readonly&#039;)&quot;&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; class=&quot;oe_form_uri&quot; target=&quot;_blank&quot;/&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class=&quot;qq_number&quot;&gt;&lt;/span&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/span&gt;<br /><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;t t-if=&quot;!widget.get(&#039;effective_readonly&#039;)&quot;&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;text&quot; t-att-id=&quot;widget.id_for_label&quot; t-att-tabindex=&quot;widget.node.attrs.tabindex&quot; t-att-autofocus=&quot;widget.node.attrs.autofocus&quot; t-att-placeholder=&quot;widget.node.attrs.placeholder&quot; t-att-maxlength=&quot;widget.field.size&quot; /&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/t&gt;<br />&nbsp; &nbsp; &nbsp; &nbsp; &lt;/span&gt;<br />&nbsp; &nbsp; &lt;/t&gt;<br />&lt;/template&gt;<br />....<br />

web_qq_widget.js 文件:

<br />....<br />openerp.rundex = function(instance){<br />&nbsp; &nbsp; var _t = instance.web._t, _lt = instance.web._lt;<br />&nbsp; &nbsp; var QWeb = instance.web.qweb;<br />&nbsp; &nbsp; instance.web.form.widgets.add(&#039;qq&#039;, &#039;instance.rundex.QqWidget&#039;);<br />&nbsp; &nbsp; instance.rundex.QqWidget = instance.web.form.FieldChar.extend({<br />&nbsp; &nbsp; &nbsp; &nbsp; display_name : _lt(&#039;QqWidget&#039;),<br />&nbsp; &nbsp; &nbsp; &nbsp; template: &quot;QqWidget&quot;,<br /><br />&nbsp; &nbsp; &nbsp; &nbsp; render_value: function(){<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!this.get(&quot;effective_readonly&quot;)){<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this._super();<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (this.get(&#039;value&#039;)){<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$el.find(&#039;a&#039;).attrs(&#039;href&#039;, &#039;http://wpa.qq.com/msgrd?v=3&amp;uid=&#039; + this.get(&#039;value&#039;) + &#039;&amp;site=qq&amp;menu=yes&#039;).html(&#039;&lt;img border=&quot;0&quot; src=&quot;http://pub.idqqimg.com/wpa/images/counseling_style_52.png&quot; alt=&quot;&#039; + this.get(&#039;value&#039;) + &#039;&quot; title=&quot;&#039; +this.get(&#039;value&#039;) + &#039;&quot;/&gt;&#039;);<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$el.find(&quot;.qq_number&quot;).text(this.get(&#039;value&#039;));<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$el.find(&#039;a&#039;).attr(&#039;href&#039;, &#039;#&#039;).html(&#039;&#039;);<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$el.find(&quot;.qq_number&quot;).text();<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br />&nbsp; &nbsp; &nbsp; &nbsp; },<br />&nbsp; &nbsp; });<br />};<br />....<br />

注: rundex 为模块名
模板文件中注意：  t-if="widget.get('effective_readonly')"  effective_readonly = true 表示编辑状态

特此感谢 buke(广州-步科) 同学的分享.. 大家鼓掌...

[Joshua]

鼓掌，谢谢buke，谢谢shelly

[baialaps]

哈哈，感觉buke && 感谢总监

[ccdos]

鼓掌

[oldrev]

赞一个，确实不错呢

[wangbuke]

总监辛苦了，多谢各位捧场 ～

代码整理了下，做成了2个小模块，请大家笑纳

https://github.com/buke/openerp-custom-widget-qq

[digitalsatori]

谢谢 步科, 谢谢总监