不多说先上源码。

 1 odoo.define('my_company_users_widget', function (require) {
2 "use strict";
3
4 var AbstractField = require('web.AbstractField');
5 var fieldRegistry = require('web.field_registry');
6
7 var core = require('web.core');
8 var qweb = core.qweb;
9
10 var FieldCompanyUser = AbstractField.extend({
11 className: 'o_kanban_view',//当前控件使用的是哪个scss类。这个类里边包含了你所有使用到的样式。这样的好处是,你编写的小部件可移植变强
12 tagName: 'div',//设置你的根元素
13 supportedFieldTypes: ['many2many'],//设置你的小部件可以用在什么字段上。
14 events: {//这是事件。当点击了这个class元素的时候触发clickCard
15 'click .oe_kanban_global_click': 'clickCard',
16 },
17 init: function () {//初始化
18 this._super.apply(this, arguments);
19 },
20 _getImageURL: function (model, field, id, placeholder) {//这个方法是用生成访问图片的url
21 id = (_.isArray(id) ? id[0] : id) || null;
22 var isCurrentRecord = this.modelName === model && this.recordData.id === id;
23 var url;
24 if (isCurrentRecord && this.record[field] && this.record[field].raw_value && !utils.is_bin_size(this.record[field].raw_value)) {
25 // Use magic-word technique for detecting image type
26 url = 'data:image/' + this.file_type_magic_word[this.record[field].raw_value[0]] + ';base64,' + this.record[field].raw_value;
27 } else if (placeholder && (!model || !field || !id || (isCurrentRecord && this.record[field] && !this.record[field].raw_value))) {
28 url = placeholder;
29 } else {
30 var session = this.getSession();
31 var params = {
32 model: model,
33 field: field,
34 id: id
35 };
36 if (isCurrentRecord) {
37 params.unique = this.record.__last_update && this.record.__last_update.value.replace(/[^0-9]/g, '');
38 }
39 url = session.url('/web/image', params);
40 }
41 return url;
42 },
43 willStart: function () {//这里准备好你的数据
44 var self = this;
45 this.data_users = [];
46
47 var DataPromise = this._rpc({//调用model方法
48 model: 'res.groups',
49 method: 'get_company_users',
50 args: [[self.record.res_id],self.record.res_id]
51 }).then(function (result){
52 var i = 0;
53 for (i=0;i<result.length;i++){
54 result[i].image_url = self._getImageURL('res.users', 'image_128', result[i].id, '');
55 console.log(result[i].image_url);
56 };
57 self.data_users = result
58 console.log('result');
59 console.log(result);
60 });
61
62 return Promise.all([this._super.apply(this, arguments), DataPromise]);
63 },
64
65 _renderEdit: function () {
66 this.$el.empty();//这是编辑的时候显示内容。这里我将它置空了。所以在编辑的时候该控件直接不见了
67 },
68
69 _renderReadonly: function () {
70 this.$el.empty();//先置空控件内容。
71 var CompanyUsers = qweb.render('OWLFieldCompanyUsers', {widget: this});
72 this.$el.append(CompanyUsers);//重新添加控件内容
73
74 },
75 clickCard: function (ev) {//事件
76 var $target = $(ev.currentTarget);
77 var data = $target.data();
78 self = this;
79 this._rpc({
80 model: 'res.users',
81 method: 'get_userform_action',
82 args: [[data.val]]
83 }).then(function (result){
84 self.do_action(result);
85 });
86 }
87
88 });
89
90 fieldRegistry.add('company_users', FieldCompanyUser);//别忘记了注册你的widget
91
92 return {//最后公开你的小部件让其他视图可以使用
93 FieldCompanyUser: FieldCompanyUser,
94 };
95 });
 1 <?xml version="1.0" encoding="UTF-8"?>
2 <templates>
3 <t t-name="OWLFieldCompanyUsers" >
4
5 <div class="o_kanban_view o_kanban_mobile o_kanban_ungrouped">
6 <t t-foreach="widget.data_users" t-as="record">
7 <div t-attf-class="oe_kanban_global_click o_kanban_record" t-att-data-val="record.id">
8 <div class="o_kanban_image">
9 <img alt="Avatar" t-att-src="record.image_url"/>
10 </div>
11 <div class="oe_kanban_details">
12 <ul>
13 <li class="text-success float-right mb4" t-if="record.active"><i class="fa fa-circle" role="img" aria-label="Ok" title="Ok"/></li>
14 <li class="text-danger float-right mb4" t-if="!record.active"><i class="fa fa-circle" role="img" aria-label="Invalid" title="Invalid"/></li>
15 <li class="mb4">
16 <strong><t t-esc="record.name"/></strong>
17 </li>
18 <li class="badge badge-pill float-right mb4" t-if="record.lang"><t t-esc="record.lang"/></li>
19 <li class="mb4" t-if="record.login" title="Login"><i class="fa fa-envelope" role="img" aria-label="Login"/> <t t-esc="record.login"/></li>
20 </ul>
21 </div>
22 </div>
23 </t>
24 </div>
25 </t>
26
27 </templates>
1     <template id="assets_end" inherit_id="web.assets_backend">
2 <xpath expr="." position="inside">
3 <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/kanban_view.scss"/>
4 <script src="/ship_manage/static/src/js/field_widget.js" type="text/javascript" />
5 </xpath>
6 </template>
o_kanban_view样式类在kanban_view.xml文件中

Odoo14 自定义widget小部件的更多相关文章

  1. Android简易实战教程--第十四话《模仿金山助手创建桌面Widget小部件》

    打开谷歌api,对widget小部件做如下说明: App Widgets are miniature application views that can be embedded in otherap ...

  2. 从Hello World说起(Dart)到“几乎所有东西都是Widget”小部件。

    import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends S ...

  3. Android Widget 小部件(一) 简单实现

    在屏幕上加入Widget:或长按屏幕空白处,或找到WidgetPreview App选择. 原生系统4.0下面使用长按方式,4.0及以上 打开WIDGETS 创建Widget的一般步骤: 在menif ...

  4. Android Widget 小部件(四---完结) 使用ListView、GridView、StackView、ViewFlipper展示Widget

    官方有话这样说: A RemoteViews object (and, consequently, an App Widget) can support the following layout cl ...

  5. django中widget小部件

    1. 处理 input 的部件 TextInput    NumberInput EmailInput URLInput PasswordInput HiddenInput DateInput Dat ...

  6. iOS - Widget 小部件

    1.Widget iOS extension 的出现,方便了用户查看应用的服务,比如用户可以在 Today 的 widgets 中查看应用的简略信息,然后点击进入相关的应用界面. 2.添加 Widge ...

  7. Android Widget 小部件(三) 在Activity中加入Widget

    package com.stone.ui; import static android.util.Log.d; import android.app.Activity; import android. ...

  8. Web UI开发推荐!Kendo UI for jQuery自定义小部件——使用MVVM

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  9. Web UI开发推荐!Kendo UI for jQuery自定义小部件——处理事件

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

随机推荐

  1. Net6 Xunit 集成测试

    对于单元测试.集成测试大部分开发的朋友都懒得去写,因为这要耗费精力去设计去开发,做完项目模块直接postman 调用测试(当然这是一个选择,开发也中经常用到),但是如果测试需要多样化数据,各种场景模拟 ...

  2. 选择器补充与CSS属性

    目录 伪元素选择器 选择器优先级 CSS属性 宽和高 字体样式 文字属性 背景属性 边框属性 display属性 盒子模型 浮动(float) 清除浮动 伪元素选择器 伪元素选择器可以通过CSS操作文 ...

  3. 手把手教你使用 Spring Boot 3 开发上线一个前后端分离的生产级系统(一) - 介绍

    项目简介 novel 是一套基于时下最新 Java 技术栈 Spring Boot 3 + Vue 3 开发的前后端分离的学习型小说项目,配备详细的项目教程手把手教你从零开始开发上线一个生产级别的 J ...

  4. SpringCloud Alibaba Sentinel 限流详解

    点赞再看,养成习惯,微信搜索[牧小农]关注我获取更多资讯,风里雨里,小农等你,很高兴能够成为你的朋友. 项目源码地址:公众号回复 sentinel,即可免费获取源码 熔断规则 在上一篇文章中我们讲解了 ...

  5. 关于『进击的Markdown』:第四弹

    关于『进击的Markdown』:第四弹 建议缩放90%食用 美人鱼(Mermaid)悄悄的来,又悄悄的走,挥一挥匕首,不留一个活口 又是漫漫画图路... 女士们先生们,大家好!  我们要接受Markd ...

  6. JAVA - 线程从创建到死亡的几种状态都有哪些?

    JAVA - 线程从创建到死亡的几种状态都有哪些? 新建( new ):新创建了一个线程对象. 可运行( runnable ):线程对象创建后,其他线程(比如 main 线程)调用了该对象 的 sta ...

  7. 前端5jQuery

    内容概要 jQuery简介 查找标签 jQuery操作标签 jQuery事件操作 jQuery动画效果(了解) 前端第三方框架(基础) 内容详情 jQuery简介

  8. 测试软件稳定性、健壮性之Monkey工具--简洁与深入

    搭建环境这章节没做详细说明,因为我是前期做APP自动化是已经将 SDK 以及JDK给安装配置好了,这次是直接上来演示monkey的功能点以及运用 一.什么是稳定性测试? 通过随机点击屏幕一段时间,看看 ...

  9. c++ 辗转相除(动图)

    #include<iostream> #include<cstdio> #include<iomanip> #include<cstring> usin ...

  10. ForEach遍历集合、 集合容器

    ForEach遍历集合 foreach循环是一种更加简洁的for循环,也称增强for循环,能用于遍历数组或集合中的元素. 格式: for(容器元素类型 临时变量:容器变量){ 执行语句} 从上面格式可 ...