odoo里的javascript学习---自定义插件

插件效果图

定义js

odoo.define('auto_widget',function(require){
    "use strict"

//通过扩展AbstractField来扩展 field
var AbstractField = require('web.AbstractField');
var fieldRegistry = require('web.field_registry');
var core = require('web.core');
var qweb =core.qweb;

var colorField=AbstractField.extend({

    //为widget 设置css样式
    className:'o_int_colorpicker',
    tagName:'span',
    supportedFieldTypes: ['integer'],
    //获取一些javascript 事件
    events:{
        'click .o_color_pill':'clickPill',
    },

    //继承init  以及进行一些初始化
    init:function(){
        this.totalColors=10;
        this._super.apply(this,arguments);

    },
    //执行以下步骤对服务器进行Rpc调用，并在工具中提示中显示结果
    willStart:function(){
        var self=this;
        this.colorGroupData={};
        var colorDataDef = this._rpc({
            model:this.model,
            method:'read_group',
            domain:[],
            fields:['color'],
            groupBy:['color'],
        }).then(function(result){
            _.each(result,function(r){
                self.colorGroupData[r.color]=r.color_count;
            });
        });
        return $.when(this._super.apply(this,arguments),colorDataDef);
    },

    //继承_renderEdit   \_renderReadonly来设置DOM
    _renderEdit:function () {
        this.$el.empty();
        var pills=qweb.render('FieldColorPills',{widget:this});
        this.$el.append(pills);
        //在圆球上设置bootscript 工具提示
        this.$el.find('[data-toggle="tooltip"]').tooltip();
        // for (var i=0;i<this.totalColors;i++){
        //     var className='o_color_pill o_color_'+i;
            // if(this.value===i){
            //     className+='active';
            // }
            // this.$el.append($('<span>',{
            //     'class':className,
            //     'data-val':i,
            // }));
        // }

    },

    _renderReadonly:function(){
        var className="o_color_pill active readonly o_color_"+this.value;
        this.$el.append($('<sapn>',{
            'class':className,
        }));
    },

    //定义之前说的处理程序
    clickPill:function(ev){
        var $target = $(ev.currentTarget);
        var data = $target.data();
        this._setValue(data.val.toString());

    }
});

//最后注册widget
fieldRegistry.add('int_color',colorField);

//closing 'auto_widget' namespace 关闭 'auto_widget' 命名空间
return {
    colorField:colorField,
};

});

定义scss

.o_int_colorpicker {
    .o_color_pill {
        display: inline-block;
        height: 25px;
        width: 25px;
        margin: 4px;
        border-radius: 25px;
        position: relative;
        @for $size from 1 through length($o-colors) {
            &.o_color_#{$size - 1} {
                background-color: nth($o-colors, $size);
                &:not(.readonly):hover {
                    transform: scale(1.2);
                    transition: 0.3s;
                    cursor: pointer;
                }
                &.active:after{
                    content: "\f00c";
                    display: inline-block;
                    font: normal normal normal 14px/1 FontAwesome;
                    font-size: inherit;
                    color: #fff;
                    position: absolute;
                    padding: 4px;
                    font-size: 16px;
                }
            }
        }
    }
}

定义template.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
   <template id="assets_end" inherit_id="web.assets_backend">
       <xpath expr="." position="inside">
           <script src="/auto_widget/static/src/js/auto_widget.js" type="text/javascript"/>
           <link href="/auto_widget/static/src/scss/field_widget.scss" rel="stylesheet" type="text/scss" />
       </xpath>
   </template>
</odoo>

"static/src/xml/qweb_template.xml"

<?xml version="1.0" encoding="utf-8" ?>
<templates >
    <t t-name="FieldColorPills">
        <t t-foreach="widget.totalColors" t-as="pill_no">
            <span t-attr-class="o_color_pill o_color_#{pill_no} #{widget.value===pill_no and 'active' or ''}"
                  t-att-data-val="pill_no"
                  data-toggle="tooltip"
                  data-placement="top"
                  t-attf-title="This color is used in #{widget.colorGroupData[pill_no] or 0} books."
            />

        </t>
    </t>
</templates>

最后模型使用

    color=fields.Integer(u'color')

    <field name="color" widget="int_color"/>

模型布局