【odoo17 | Owl】前端js钩子调用列表选择视图

概要

        在我们选择多对一或者多对多字段的时候,经常看到可以弹出列表弹窗让人一目了然的效果,效果如下:

         那么,这种效果是odoo本身封装好的组件,我们在平时的前端界面开发的时候,既不是后端视图的情况下,如何调出这种选择列表呢?

内容

解决办法:就是在前端组件中(owl组件),引用官方的useSelectCreate钩子函数。

/** @odoo-module **/
import { Component } from "@odoo/owl";
import { useSelectCreate } from "@web/views/fields/relational_utils";export class Demo extends Component {setup() {const selectCreate = useSelectCreate({resModel: "product.product",activeActions: {create:false,createEdit:true,delete:true,link:true,onDelete:()=>{console.log("删除成功");},type:'many2many',unlink:true,write:false,},onSelected: (resIds) => {console.log("选中", resIds);},onCreateEdit: () => {console.log("创建成功");},onUnselect: true,});this.selectCreate = (params) => {return selectCreate(params);};}//在视图增加一个事件测试就可以了ceshi(){let context = {tree_view_ref: "product.product_product_tree_view",};const productName = 'GG boy';const title = _t("Add line: %s", productName);const domain = [];return this.selectCreate({ domain, context, title });}
}

 钩子函数源码:

export function useSelectCreate({ resModel, activeActions, onSelected, onCreateEdit, onUnselect }) {const addDialog = useOwnedDialogs();function selectCreate({ domain, context, filters, title }) {addDialog(SelectCreateDialog, {title: title || _t("Select records"),noCreate: !activeActions.create,multiSelect: "link" in activeActions ? activeActions.link : false, // LPE FixmeresModel,context,domain,onSelected,onCreateEdit: () => onCreateEdit({ context }),dynamicFilters: filters,onUnselect,});}return selectCreate;
}

由源码看出,控制能不能多选的属性是activeActions中的line,为真则可以多选。剩下的就是业务逻辑处理了,可以根据他们的回调函数进行前端页面开发了。

小结

        多写多敲多思考,毕竟,知己知彼才能看懂源码。

Tip:本人才学尚浅,如有纰漏,还请不吝赐教!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/50541.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【YOLOv5/v7改进系列】引入中心化特征金字塔的EVC模块

一、导言 现有的特征金字塔方法过于关注层间特征交互而忽视了层内特征的调控。尽管有些方法尝试通过注意力机制或视觉变换器来学习紧凑的层内特征表示,但这些方法往往忽略了对密集预测任务非常重要的被忽视的角落区域。 为了解决这个问题,作者提出了CF…

v-show 和 v-if 的区别 requests主要方法post、put和patch的简单区别

v-show 和 v-if 的区别 && requests主要方法&&post、put和patch的简单区别 v-show 和 v-if 的区别 v-show 和 v-if 都是 Vue 中用于控制元素显示与隐藏的指令 但它们有以下区别 v-show 通过 CSS 的 display 属性来控制元素的显示与隐藏,而 v-if…

数据结构(5.3_4)——线索二叉树的概念

普通二叉树找某结点前驱和后继的方法 中序线索二叉树 n个结点的二叉树,有n1个空链域!可用来记录前驱,后继的信息 中序线索二叉树的存储结构 //线索二叉树结点 typedef struct ThreadNode {ElemType data;struct BiTNode* lchild, * rchild;int ltag,…

前端面试高频50题,嘎嘎香

目录 HTML相关问题CSS相关问题JavaScript相关问题Vue.js相关问题React相关问题浏览器相关问题性能优化相关问题 1. HTML相关问题 1. 什么是Doctype?有什么作用? Doctype(文档类型声明)是一种标准通告,它告诉浏览器…

嵌入式驱动源代码(18):网络编程-原始套接字

目录 3种方式创建原始socket 常用头文件 IP_HDRINCL 三个参数 sockaddr_ll 3种方式创建原始socket socket(AF_INET, SOCK_RAW, IPPROTO_TCP|IPPROTO_UDP|IPPROTO_ICMP)发送接收ip数据包socket(PF_PACKET, SOCK_RAW, htons(ETH_P_IP|ETH_P_ARP|ETH_P_ALL))发送接收以太网数…

大模型:AI领域的下一个风口

一、什么是大模型? 大模型,顾名思义,是指具有超大规模的神经网络模型。它们通常需要海量的数据和计算资源来训练和运行。典型的大模型有 GPT-3、BERT、AlphaFold 等,这些模型在自然语言处理、生物信息学等领域取得了显著的成果。…

常见的 HTTP 状态码分类及说明

HTTP 响应状态码(HTTP status code),表示服务器对请求的处理结果。常见的 HTTP 状态码有以下几类: 1xx: 信息响应 (Informational Responses) 100 Continue: 请求已收到,客户端应继续发送请求的其余部分。101 Switch…

商场导航系统:从电子地图到AR导航,提升顾客体验与运营效率的智能解决方案

商场是集娱乐、休闲、社交于一体的综合性消费空间,随着商场规模的不断扩大和布局的日益复杂,顾客在享受丰富选择的同时,也面临着寻路难、店铺曝光率低以及商场管理效率低下等挑战。商场导航系统作为提升购物体验的关键因素,其重要…

黄景仁,笔墨间的一抹清寒

黄景仁,字汉镛,一字仲则,号鹿菲子,生于乾隆十四年(公元1749年),卒于乾隆四十八年(公元1783年),享年仅35岁。他是宋代大诗人黄庭坚的后裔,出生于常…

deepseek-vl 论文阅读笔记

目录 一、已有模型性能差距分析 二、创新点 数据集构建 模型架构 训练策略 实验与评估 三、细节 数据构建 内部SFT数据的分类体系 模型架构 训练流程包括三个阶段 系统包含三个模块 混合视觉编码器 视觉-语言适配器 语言模型 训练策略 阶段一:训练…

AMQP-核心概念-3

本文参考以下链接摘录翻译: https://www.rabbitmq.com/tutorials/amqp-concepts 队列(Queues) AMQP 0-9-1模型中的队列和其他消息任务队列系统中的队列非常相似:它们用于存储被应用消费的消息。队列和交换机有一些相同的属性&…

el-date-picker 时间控件校验选择时间必须早于当前时间(带时分秒)

el-date-picker 时间控件校验选择时间必须遭早于当前时间(带时分秒),然后监控时间控件,当时间改变的时候,如果不是当天,那时间可以选择全天也就是00-24时,如果是当天,就是当前时间之…

【React】JSX:从基础语法到高级用法的深入解析

文章目录 一、什么是 JSX?1. 基础语法2. 嵌入表达式3. 使用属性4. JSX 是表达式 二、JSX 的注意事项1. 必须包含在单个父元素内2. JSX 中的注释3. 避免注入攻击 三、JSX 的高级用法1. 条件渲染2. 列表渲染3. 内联样式4. 函数作为子组件 四、最佳实践 在 React 开发中…

根据《数字信用在电力行业应用思路及探索》,在实现碳中和目标下,电力产业如何通过绿色金融促进碳减排()

根据《数字信用在电力行业应用思路及探索》,在实现碳中和目标下,电力产业如何通过绿色金融促进碳减排()查看正确答案 A、《数字信用在电力行业应用思路及探索》 B、扩大电力消费C、参与电力碳市场建设,强化市场金融属性 D、电力行业供应链金融…

PHP Filesystem 简介

PHP Filesystem 简介 PHP 是一种广泛使用的开源服务器端脚本语言,特别适用于网页开发。在 PHP 中,Filesystem 是一个功能丰富的库,提供了一系列用于文件系统操作的函数。这些函数允许开发者读取、写入、修改和删除文件和目录,以及…

云计算实训室建设可行性报告

一、建设云计算实训室的目的和意义 随着信息技术的飞速发展,云计算作为一种新型的信息服务模式,已经成为推动信息技术创新和促进信息产业发展的重要力量。中高职院校作为培养高素质技能人才的重要基地,应当紧跟时代步伐,加强云计…

视觉-语言-行动模型:将网络知识迁移至机器人控制(RT-2论文翻译)

RT-2: Vision-Language-Action Models Transfer Web Knowledge to Robotic Control RT-2: 用互联网知识训练的视觉语言模型融入到机器人控制中 RT1 论文翻译: https://blog.csdn.net/weixin_43334869/article/details/135850410 文章目录 RT-2: Vision-Language…

关键词查找【Boyer-Moore 算法】

1、【Boyer-Moore 算法】 【算法】哪种算法有分数复杂度?- BoyerMoore字符串匹配_哔哩哔哩_bilibili BM算法的精华就在于BM(text, pattern),也就是BM算法当不匹配的时候一次性可以跳过不止一个字符。即它不需要对被搜索的字符串中的字符进行逐一比较,而…

AI绘画入门实践 | Midjourney:使用 --tile 制作面料纹理与壁纸背景图

在 Midjourney 中,--tile 生成可以连续平铺的图像,常用于面料墙纸与纹理的无缝图案。 使用格式:提示词 --tile 使用演示 a pink rose, clean background --tile --niji 5 无缝图检查工具:https://www.pycheung.com/checker/ 平铺…

C++学习笔记-函数模版与类模版

模板是C语言中的一个强大特性,它允许程序员编写通用代码以处理不同数据类型的数据,从而实现代码的重用和泛化。 一、C模板的基本概念 C模板是一种泛型编程工具,通过参数化类型来编写通用的函数和类。模板的核心思想是允许程序员编写一次代码…