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