odoo自定义html,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

// var className='o_color_pill o_color_'+i;

// if(this.value===i){

// className+='active';

// }

// this.$el.append($('',{

// 'class':className,

// 'data-val':i,

// }));

// }

},

_renderReadonly:function(){

var className="o_color_pill active readonly o_color_"+this.value;

this.$el.append($('',{

'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

"static/src/xml/qweb_template.xml"

/>

最后模型使用

color=fields.Integer(u'color')

模型布局