Grails：将自定义 javaScript 添加到 f:all 中呈现的字段答案

【问题标题】：Grails: add custom javaScript to field rendered in f:allGrails：将自定义 javaScript 添加到 f:all 中呈现的字段
【发布时间】：2021-08-24 14:40:44
【问题描述】：

我有一些使用标签呈现的字段。

其中三个字段需要一个“onClick”属性，因此我可以在单击时打开/关闭其他字段的一些强制性设置。

我已经添加了正确的 javascript 函数，并尝试在正文的 onload 部分使用 init() 函数对其进行初始化：

<body onLoad="init()">
...
</body>

init 函数如下所示：

function init() {
                const exportElement = document.getElementById('export');
                const importElement = document.getElementById('import_');
                const transitElement = document.getElementById('transit');
                exportElement.onclick(this.validate());
                importElement.onclick(this.validate());
                transitElement.onclick(this.validate());
            }

gsp 页面中的部分如下所示：

    <g:form resource="${this.agreement}" method="POST">
        <fieldset class="form">
            <f:all bean="agreement" associationValues="${associationValues}"/>
        </fieldset>
        <fieldset class="buttons">
            <g:submitButton name="create" class="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
        </fieldset>
    </g:form>

我的理解是，调用 onload() 函数时元素尚未渲染，因为它在加载时立即调用。因此这个想法行不通，所以这是我的想法：

我知道可以使用“except”属性从 f:all 范围中删除一些元素。我可以以某种方式以特定顺序手动添加包含 onclick() 属性的需求元素，还是需要完全切换到手动字段实现？

感谢您的任何指点。

【问题讨论】：

onLoad 在加载所有页面内容之前不会运行，假设它稍后不会被 ajax 调用加载。特别是，您来自 <f:all...> 的元素应该在您的 init 函数运行时加载。可以分享一下渲染的html吗？
HTML 很大。但是，相关的元素不包含 onclick，这就是为什么要在标题中执行此操作的原因。加载时调用 init() 函数，但单击复选框无效。我通过手动添加的复选框调用 validate() 快速对此进行了测试，效果很好。
了解 HTML。浏览器控制台中什么都没有，我猜？您的一般方法似乎很好，但不知道更多关于如何/何时加载元素，很难确定。关于你实际问的问题：我个人多年前放弃了大多数 grails 提供的标签，因为它们通常过于严格。但是，grails-fields-plugin.github.io/grails-fields/latest/ref/Tags/… 表示您可以添加将通过的额外属性。
我设法用一个简单的 JavaScript 完成了它： document.addEventListener("DOMContentLoaded", function(){ document.getElementById('export').setAttribute('onclick','validate() ;'); document.getElementById('import_').setAttribute('onclick','validate();'); document.getElementById('transit').setAttribute('onclick','validate();'); });这正是我所需要的。谢谢你的帮助:)

标签： javascript grails grails-3.3

【解决方案1】：

f:all 标签是 Grails Fields 插件。您可以覆盖插件生成的 HTML。我可以先给你看我的。所以，你可以有一些想法。这比在客户端逐个字段中执行此操作更容易。如果可以的话，我会尝试为您的具体情况编写代码。

我有一堆日期字段。 Fields 插件将生成 HTML 以显示日期，例如 2021-11-07 00:00:00:0000（例如）。因此，我没有在 gsp 文件中一一格式化我的所有日期字段，而是按照此处的字段插件文档中的说明进行操作：

https://grails-fields-plugin.github.io/grails-fields/latest/guide/index.html#customizingFieldRendering

我在“views”文件夹中创建了一组文件夹。文件夹路径是“views/_fields/date”。此路径告诉 Fields 插件为我的项目中的所有 Date 字段生成 HTML。

然后我创建一个名为“_displayWidget.gsp”的 gsp 文件。这个 gsp 文件告诉插件生成所有日期字段以供显示。

这是在 gsp 文件中：

<g:formatDate date="${value}" format="MM/dd/yyyy"/>

字段插件现在将自动以 MM/dd/yyyy 格式显示所有日期。

在您的情况下，您的域中似乎有一个名为“export”的字段。按照说明，您将使用以下格式创建文件夹路径：

grails-app/views/controllerName/propertyName/

因此，您将在此文件夹中创建显示小部件 gsp 文件，如：

"views/yourControllerName/export/_displayWidget.gsp"

将“yourControllerName”替换为域具有“export”字段的实际控制人的名称。

因此，_displayWidget.gsp 文件中的 HTML 可能如下所示。

<button onclick="validate()">${value}</button>

现在，Fields 插件将在每次看到您的“导出”字段时生成此 HTML。

对于您的 import_ 和您的传输字段，您可以像这样创建文件夹并将 HTML 代码放入 gsp 文件中。

"views/yourControllerName/import_/_displayWidget.gsp"
"views/yourControllerName/transit/_displayWidget.gsp"

Fields 插件会将文件夹名称与您的字段名称相匹配以生成 HTML。

【讨论】：