Odoo 自定义form表单按钮点击事件处理程序
实践环境
Odoo 14.0-20221212 (Community Edition)
代码实现
方案1
通过研究发现,点击odoo form表单按钮时,会调用odoo14\odoo\addons\web\static\src\js\views\form\form_controller.js文件中的_onButtonClicked函数,在该函数中响应点击事件。所以,我们可以通过重写该方法来实现自定义响应点击事件。示例如下
表单视图定义
codePojects\odoo14\custom\estate\wizards\demo_wizard_views.xml
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
<data>
<record id="demo_wizard_view_form" model="ir.ui.view">
<field name="name">demo.wizard.form</field>
<field name="model">demo.wizard</field>
<field name="arch" type="xml">
<form>
//...代码略
<footer>
<button name="action_confirm" special="other" type="object" string="确认" class="oe_highlight"/>
<button string="关闭" class="oe_link" special="cancel"/>
</footer>
</form>
</field>
</record>
//...代码略
</data>
</odoo>
重定义web.FormController以实现重写_onButtonClicked
codePojects\odoo14/estate/static/src/js/views/form_controller.js
odoo.define('customModule.FormController', function (require) {
"use strict";
var formController = require('web.FormController');
var CustomFormController = formController.extend({
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
/**
* @private
* @param {OdooEvent} ev
*/
_onButtonClicked: function (ev) {
// stop the event's propagation as a form controller might have other
// form controllers in its descendants (e.g. in a FormViewDialog)
ev.stopPropagation();
var self = this;
var def;
this._disableButtons();
function saveAndExecuteAction () {
return self.saveRecord(self.handle, {
stayInEdit: true,
}).then(function () {
// we need to reget the record to make sure we have changes made
// by the basic model, such as the new res_id, if the record is
// new.
var record = self.model.get(ev.data.record.id);
return self._callButtonAction(attrs, record);
});
}
var attrs = ev.data.attrs;
if (attrs.confirm) {
def = new Promise(function (resolve, reject) {
Dialog.confirm(self, attrs.confirm, {
confirm_callback: saveAndExecuteAction,
}).on("closed", null, resolve);
});
} else if (attrs.special === 'cancel') {
def = this._callButtonAction(attrs, ev.data.record);
} else if (attrs.special == 'other') { // 新增自定义事件处理
self._enableButtons(); // 启用按钮(点击后会自动禁用按钮)
self.trigger_up('close_dialog'); // 关闭对话框
return;
} else if (!attrs.special || attrs.special === 'save') {
// save the record but don't switch to readonly mode
def = saveAndExecuteAction();
} else {
console.warn('Unhandled button event', ev);
return;
}
// Kind of hack for FormViewDialog: button on footer should trigger the dialog closing
// if the `close` attribute is set
def.then(function () {
self._enableButtons();
if (attrs.close) {
self.trigger_up('close_dialog');
}
}).guardedCatch(this._enableButtons.bind(this));
},
});
odoo.__DEBUG__['services']['web.FormController'] = CustomFormController;
});
codePojects\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/views/form_controller.js"></script>
</xpath>
</template>
</odoo>
codePojects\odoo14\custom\estate\__manifest__.py
#!/usr/bin/env python
# -*- coding:utf-8 -*-
{
'name': 'estate',
'depends': ['base'],
'data':[
# ...略
'views/webclient_templates.xml',
'wizards/demo_wizard_views.xml',
# ...略
]
}
方案2
研究发现,在不为按钮设置type属性的情况下,可以为按钮添加onclick属性,指定点击按钮时需要调用的javascript函数,不过,此时点击按钮,不会再调用web.FormController中定义的_onButtonClicked函数。示例如下:
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
<data>
<record id="demo_wizard_view_form" model="ir.ui.view">
<field name="name">demo.wizard.form</field>
<field name="model">demo.wizard</field>
<field name="arch" type="xml">
<form>
//...代码略
<footer>
<button name="action_confirm" do_confirm_action('demo.wizard','action_confirm') string="确认" class="oe_highlight"/>
<button string="关闭" class="oe_link" special="cancel"/>
</footer>
</form>
</field>
</record>
//...代码略
</data>
</odoo>
codePojects\odoo14/estate/static/src/js/demo_wizard_views.js
function do_confirm_action(modelName, modelMethod){
// do something
//...
$("button[name='action_confirm']").attr("disabled", true);
}
codePojects\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/demo_wizard_views.js"></script>
</xpath>
</template>
</odoo>
Odoo 自定义form表单按钮点击事件处理程序的更多相关文章
- 利用 ajax自定义Form表单的提交方式
需求场景:有时候单纯的form表单无法向后端传递额外的参数 比如需要action传递js异步生成的参数 ,form表单默认的action就无法满足需求,这时就需要我们自定义form表单的提交方式. h ...
- python26:自定义form表单验证
一.自定义Form的原理 1.1 各种form表单验证比较 只有python提供了form表单验证,其他的都没有提供.django提供的功能还不够强大.最强大的是微软的ASP.NET!我们可以自己写一 ...
- iview form表单数值类型校验「iview自定义form表单校验器」
摘录iview表单验证 Form 组件基于 sync-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可. ...
- web前端框架之自定义form表单验证
自定义form验证初试 .在后端创建一个类MainForm,并且在类中自定义host ip port phone等,然后写入方法,在post方法中创建MainForm对象,并且把post方法中的sel ...
- tornado之自定义form表单验证
直接上链接吧:银角的地址 源码下载链接:点我点我点我...
- DuiLib笔记之自定义标题栏以及响应按钮点击事件
在博文DuiLib笔记,基于WindowImplBase的基础模板的基础上,修改皮肤文件如下 <?xml version="1.0" encoding="utf-8 ...
- form表单的字符串进行utf-8编码
<form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explore ...
- 提交Form表单,submit之前做js判断处理
效果: 在点击提交按钮时,首先进行js判断, 如果不符合条件,则alert出提示信息,并return false. 主要点就在于给form表单添加一个onsubmit事件. 在onsubmit事件中定 ...
- form 表单提交返回值问题
form不比ajax,即使后台返回值后,在页面也不知道怎么去取值判断提交状态.所以前几天结合网上资料整了一个小案例,需要用到ajaxSubmit,即通过ajax来提交表单,好处在于可以在任何情况下进行 ...
- 看用Tornado如何自定义实现表单验证
我们知道,平时在登陆某个网站或软件时,网站对于你输入的内容是有要求的,并且会对你输入的错误内容有提示,对于Django这种大而全的web框架,是提供了form表单验证功能,但是对于Tornado而言, ...
随机推荐
- Nginx 修饰符 Location 详解
概述 location 指令可以用在虚拟服务器 server 部分,并且意味着提供来自客户端的 URI 或者内部重定向访问. location 的定义如下: location [modifier] u ...
- Vue cli之路由router
一.安装路由 Vue-router用于提供给vue项目在开发中用于绑定url和组件页面的关系的核心插件. 默认情况下,vue没有提供路由的功能,所以我们使用vue-router,并需要在项目根目录. ...
- 一个简单demo展示接口请求超时处理
package main import ( "context" "errors" "fmt" "time" ) type ...
- 使用 OWIN Self-Host ASP.NET Web API 自宿主 Swagger Swashbuckle 在线文档
使用 OWIN Self-Host ASP.NET Web APIhttps://learn.microsoft.com/zh-cn/aspnet/web-api/overview/hosting-a ...
- DevOps全面综述:从概念到实践
这篇文章详尽介绍了DevOps的背景.核心实践.工具和技术,探讨了团队协作.文化建设及组织变革,旨在帮助企业高效实现持续交付和创新. 关注作者,分享互联网架构.云服务技术的全维度知识.作者拥有10+年 ...
- uniapp 小程序分享功能
上个月在做小程序的项目时,甲方需要给小程序添加个分享的功能,查看uniapp官方文档后,发现uniapp有自带的小程序分享功能(https://uniapp.dcloud.io/api/plugins ...
- 执行nodejs 内置fs模块
执行方式1: 在 cmd 中 任意文件夹路径下输入 node 回车 C:\Users\32991>node ...
- C#.NET Winform承载WCF RESTful API (硬编码配置)
1.新建一个名为"WindowsForms承载WCF"的WINFORM程序. 2.在解决方案里添加一个"WCF 服务库"的项目,名为"WcfYeah& ...
- 一文带你搞清楚Python的多线程和多进程
本文分享自华为云社区<Python中的多线程与多进程编程大全[python指南]>,作者:柠檬味拥抱. Python作为一种高级编程语言,提供了多种并发编程的方式,其中多线程与多进程是最常 ...
- n. Elasticsearch JAVA API操作
引言 Elasticsearch所支持的客户端连接方式有两种 Transport 连接 底层使用socket连接,用官方提供的TransPort客户端,网络IO框架使用的是netty Http连接(R ...