Odoo中文社区可以通过以下三个域名访问:shine-it.net , odoocn.org,odoo.net.cn

原论坛用户的基本信息和发帖这里都予以保留,请注意:原论坛用户无需重新注册新用户,但是您的密码需要重置

开发人员可以登录gitter讨论组: http://gitter.im/odoo-china/Talk, 需要github账号

如果您登录系统碰到问题,请在微信公众号留言:

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



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

    相关 view xml:
    [code]
    ....
            <field name="website" position="after">
                <field name="qq" widget="qq"/>
            </field>
    ....
    [/code]

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

    openerp.py 文件:
    [code]
    ....
    {
        'name': 'rundex',
        'version': '0.1',
        'category': 'Sales Management',
        'description': """
    ....
        'js': [
            'static/src/js/.js',
        ],
        'css': [
        ],
        'qweb': [
            'static/src/xml/
    .xml',
        ],
    ....
    [/code]

    web_qq_widget.xml 文件:
    [code]
    ....
    <template>
        <t t-name="QqWidget">
            <span class="oe_form_field oe_form_field_url" t-att-style="widget.node.attrs.style">
                <span class="oe_form_qq" t-if="widget.get('effective_readonly')">
                    <a href="#" class="oe_form_uri" target="_blank"/>
                    <span class="qq_number"></span>
                </span>

                <t t-if="!widget.get('effective_readonly')">
                    <div>
                        <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" />
                    </div>
                </t>
            </span>
        </t>
    </template>
    ....
    [/code]

    web_qq_widget.js 文件:
    [code]
    ....
    openerp.rundex = function(instance){
        var _t = instance.web._t, _lt = instance.web._lt;
        var QWeb = instance.web.qweb;
        instance.web.form.widgets.add('qq', 'instance.rundex.QqWidget');
        instance.rundex.QqWidget = instance.web.form.FieldChar.extend({
            display_name : _lt('QqWidget'),
            template: "QqWidget",

            render_value: function(){
                if (!this.get("effective_readonly")){
                    this._super();
                }else{
                    if (this.get('value')){
                        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') + '"/>');
                        this.$el.find(".qq_number").text(this.get('value'));
                    }else{
                        this.$el.find('a').attr('href', '#').html('');
                        this.$el.find(".qq_number").text();
                    }
                }
            },
        });
    };
    ....
    [/code]


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

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



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

    相关 view xml:
    [code]
    ....
            <field name="website" position="after">
                <field name="qq" widget="qq"/>
            </field>
    ....
    [/code]

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

    openerp.py 文件:
    [code]
    ....
    {
        'name': 'rundex',
        'version': '0.1',
        'category': 'Sales Management',
        'description': """
    ....
        'js': [
            'static/src/js/.js',
        ],
        'css': [
        ],
        'qweb': [
            'static/src/xml/
    .xml',
        ],
    ....
    [/code]

    web_qq_widget.xml 文件:
    [code]
    ....
    <template>
        <t t-name="QqWidget">
            <span class="oe_form_field oe_form_field_url" t-att-style="widget.node.attrs.style">
                <span class="oe_form_qq" t-if="widget.get('effective_readonly')">
                    <a href="#" class="oe_form_uri" target="_blank"/>
                    <span class="qq_number"></span>
                </span>

                <t t-if="!widget.get('effective_readonly')">
                    <div>
                        <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" />
                    </div>
                </t>
            </span>
        </t>
    </template>
    ....
    [/code]

    web_qq_widget.js 文件:
    [code]
    ....
    openerp.rundex = function(instance){
        var _t = instance.web._t, _lt = instance.web._lt;
        var QWeb = instance.web.qweb;
        instance.web.form.widgets.add('qq', 'instance.rundex.QqWidget');
        instance.rundex.QqWidget = instance.web.form.FieldChar.extend({
            display_name : _lt('QqWidget'),
            template: "QqWidget",

            render_value: function(){
                if (!this.get("effective_readonly")){
                    this._super();
                }else{
                    if (this.get('value')){
                        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') + '"/>');
                        this.$el.find(".qq_number").text(this.get('value'));
                    }else{
                        this.$el.find('a').attr('href', '#').html('');
                        this.$el.find(".qq_number").text();
                    }
                }
            },
        });
    };
    ....
    [/code]


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

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


  • 管理员

    鼓掌,谢谢buke,谢谢shelly



  • 哈哈,感觉buke && 感谢总监



  • 鼓掌



  • 赞一个,确实不错呢



  • 总监辛苦了,多谢各位捧场 ~

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

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


  • 管理员

    谢谢 步科, 谢谢总监


登录后回复
 

与 Odoo 中文社区 的连接断开,我们正在尝试重连,请耐心等待