实践环境

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. FFmpeg开发笔记(二十三)使用OBS Studio开启RTMP直播推流

    ​OBS是一个开源的直播录制软件,英文全称叫做Open Broadcaster Software,广泛用于视频录制.实时直播等领域.OBS不但开源,而且跨平台,兼容Windows.Mac OS.Lin ...

  2. 《最新出炉》系列入门篇-Python+Playwright自动化测试-48-Route类拦截修改请求-上篇

    1.简介 在日常工作和学习中,自动化测试的时候:在加载页面时,可能页面出现很多不是很重要或者不是我们所关注的,这个时候我们就可以选择不加载这些内容,以提高页面加载速度,节省资源.例如:可能页面上图片比 ...

  3. Python爬虫 | 批量爬取今日头条街拍美图

    01 前言 上篇文章我们爬取了今日头条街拍美图,心情相当愉悦,今天这篇文章我们使用Selenium来爬取当当网的畅销图书排行.正所谓书中自有黄金屋,书中自有颜如玉,我们通过读书学习来提高自身的才华,自 ...

  4. mvn 打包报错:no compiler is provided in this environment

    最近公司换了电脑,系统也从 win7 升级到 win11,开发环境都重新安装了一遍,然后在 idea 用mvn 执行打包命令 mvn clean package 报错: no compiler is ...

  5. if语句嵌套

       // if语句的嵌套         // 在if语句的{}中,执行程序中,再次有if语句         /*         if(){             if(){          ...

  6. ES5的继承语法

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  7. UDP端口探活的那些细节

    一 背景 商业客户反馈用categraf的net_response插件配置了udp探测, 遇到报错了,如图  udp是无连接的,无法用建立连接的形式判断端口. 插件最初的设计是需要配置udp的发送字符 ...

  8. Mysql常见安装失败的解决方法

    问题一:安装时出现Initializing database失败 解决方法: 1.关闭安装页面并卸载MySQL Installer与MySQL Server (如果卸载不掉需要重启电脑) 2.查看并勾 ...

  9. kali更换apt镜像

    kali更换apt镜像 vim /etc/apt/sources.list 进来之后按i进入编辑模式,把其他的镜像#注释掉之后,加上新的镜像,然后esc退出编辑,按:输入wq保存并退出! 上面的办法不 ...

  10. 新浪微博动态 RSA 分析图文+登录

    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 新浪微博动态 RSA 分析图文+登录 日期:2016-10 ...