插件效果图
定义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')
模型布局