实践环境

Odoo 14.0-20221212 (Community Edition)

需求描述

如下,根据条件对form视图自带按钮的显示、隐藏进行控制

代码实现

隐藏、显示编辑和创建按钮为例

odoo14/custom/estate/static/src/js/hide_or_show_form_button.js

function isHideEditButton(arg){ // 自定义函数,用途参见下文
if (arg === 'Sold') {
return true
}
return false
} odoo.define('estate.hide_or_show_form_button', function (require) {
'use strict'; let modelConfigs = {
'estate.property': { // form表单视图归属模型,即需要对按钮的显示做管控的模型名称
/* hideEditButton hideCreateButton的值可以简单理解为eval函数的参数,形如 eval(arg),整个表达式计算结果为bool值
值为真则表示需要隐藏按钮,否则显示按钮
如果不配置hideEditButton键,则表示显示编辑按钮,类似的,如果不配置hideCreateButton键,则显示创建按钮
*/
'hideEditButton': 'isHideEditButton(this.renderer.state.data.state)', // 可选,是否隐藏编“Edit”编辑按钮 字符串类型
'hideCreateButton': "this.renderer.state.data.state === 'Sold'", // 可选,是否隐藏“Create”创建按钮 字符串类型
}
}; let FormController = require('web.FormController'); FormController.include({
updateButtons: function(){
let res = this._super.apply(this, arguments); if (modelConfigs.hasOwnProperty(this.modelName)) {
// 控制显示或者隐藏编辑按钮
if (eval(modelConfigs[this.modelName].hideEditButton)) {
this.$buttons.find('.o_form_button_edit').hide();
} else {
this.$buttons.find('.o_form_button_edit').show();
} // 控制显示或者隐藏创建按钮
if (eval(modelConfigs[this.modelName].hideCreateButton)) {
this.$buttons.find('.o_form_button_create').hide();
} else {
this.$buttons.find('.o_form_button_create').show();
}
}
return res;
}
});
})

说明:

  • 如果需要隐藏其它自带按钮、或自定义按钮,可以通过查看form视图的html结构,依葫芦画瓢。
  • 根据实际需求,可以通过在js中打印this对象,以获取更多判断是否隐藏、显示按钮的有用信息。

加载自定义js

odoo14\custom\estate\views\webclient_templates.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="assets_common" inherit_id="web.assets_common" name="Backend Assets (used in backend interface)">
<xpath expr="//script[last()]" position="after">
<script type="text/javascript" src="/estate/static/src/js/hide_or_show_form_button.js">
</xpath>
</template>
</odoo>

odoo 通过Javascript显示或隐藏form自带按钮的更多相关文章

  1. JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  2. JavaScript控制页码的显示与隐藏

    前端页面开发分页显示功能时,一般都要求使用自定义的页码样式,直接用网上分页插件就比较麻烦了,这里记录一下工作中总结的一个比较简单通用的控制页码显示与隐藏的的js代码. 首先是使用时需要自己根据自己具体 ...

  3. 使用JavaScript控制HTML元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  4. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  5. 显示和隐藏(display属性)none或block

    显示和隐藏(display属性) 网页中经常会看到显示和隐藏的效果,可通过display属性来设置. 语法: Object.style.display = value 注意:Object是获取的元素对 ...

  6. js控制密码的显示与隐藏实例

    原理是建立2个input,一个type是text,一个type是password.在点击按钮时,这两input个的显示状态与val()的值在切换. html: <!DOCTYPE html> ...

  7. js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  8. div的显示和隐藏

    本文从学习角度出发,仅当做笔记.高手可以忽略本文. 借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间. js控制显示和隐藏的代码: <script ty ...

  9. [CSS]元素的显示与隐藏

    摘自:http://www.zhangxinxu.com/wordpress/?p=1528 元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与disp ...

  10. 控制HTML元素的显示与隐藏——display和visibility

    有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

随机推荐

  1. Django——启动项目时报错mysqlclient

    报错内容如下: Watching for file changes with StatReloader Exception in thread django-main-thread: Tracebac ...

  2. .NET桌面程序混合开发之二:在原生WinFrom程序中使用WebView2

    本文将介绍如何在WinForms中嵌入WebView2,并讲到WebView2的主要特征.点击了解更多WebView2的API. 1. 准备 Visual Studio 2017 及以上版本 WebV ...

  3. 【论文笔记】SegNet

    [深度学习]总目录 SegNet是Cambridge提出旨在解决自动驾驶或者智能机器人的图像语义分割深度网络,开放源码,基于caffe框架.SegNet运用编码-解码结构和最大池化索引进行上采样,最主 ...

  4. uniapp 富文本图片100%显示

    下面的这个方法是在百度上找的,但是老是报错,一直没找到原因,索性自己就挨个检查了下,发现在过滤之前需要对传过来的值进行检测,是字符串才能让这个方法执行 filters: { formatRichTex ...

  5. 大数据平台搭建手册——hadoop

    从0开始 超详细搭建hadoop平台手册 创建三台使用centos7操作系统的虚拟机 基础环境配置 ps:不建议使用DHCP,因为ip地址会变动 配置ip 1.master [root@master ...

  6. vue3项目安装依赖报错 npm ERR! code ERESOLVE

    vue3项目安装依赖报错 npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While reso ...

  7. 史上最强 AI 翻译诞生了!拳打谷歌,脚踢 DeepL

    CoT 推理范式 默认情况下,大语言模型通常是直接给出问题的最终答案,中间推理过程是隐含的.不透明的,无法发挥出大模型最极致的理解能力.如果你用它来充当翻译,可能效果和传统的机器翻译也差不了太多. 如 ...

  8. 什么是 SpringMvc?

    SpringMvc 是 spring 的一个模块,基于 MVC 的一个框架,无需中间整合层来整合.

  9. 技术解密Java Chassis 3超实用的可观测性

    本文分享自华为云社区<Java Chassis 3技术解密:实用的可观测性>,作者:liubao68. 狭义的可观测性,指日志.调用链和指标,广义的可观测性则包含更多的内容,一般的,应用程 ...

  10. MySQL Docker搭建挂载并启用远程连接

    1.拉取镜像 后面可以指定版本号,这里使用8.0 docker pull docker.io/mysql:8.0 2.查看mysql镜像 docker images 3.启动docker并挂载 doc ...