thymeleaf使用th:onclick()赋值后台函数

最新推荐文章于 2024-09-20 21:09:38 发布
原创 最新推荐文章于 2024-09-20 21:09:38 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在使用THymeleaf时遇到的点击事件无效的问题，通过尝试不同的解决方案，最终发现使用eval函数可以成功触发后台传递的菜单url。这为处理THymeleaf中动态生成的菜单按钮点击事件提供了一种可行的方法。

在这里插入图片描述
如图，这些按钮都是通过后台传递来的权限菜单生成的按钮。
<a th:each=“menu:KaTeX parse error: Expected 'EOF', got '#' at position 20: …rdMenu}" href="#̲" class="easyui…{menu.icon}” th:text=" m e n u . n a m e " t h : o n c l i c k = {menu.name}" th:οnclick= menu.name"th:onclick={menu.url">
但这里会报500。网上搜了许多都是关于onclick传递参数的，尝试了th:οnclick="[[ m e n u . u r l ] ] " 。 显 示 结 果 为 o n c l i c k = " " a d d ( ) ” " ， 点 击 无 效 。 后 来 想 起 来 j s 有 e v a l 函 数 ， 改 成 t h : o n c l i c k = " e v a l ( [ [ {menu.url}]]"。显示结果为οnclick=""add()”"，点击无效。 后来想起来js有eval函数，改成th:οnclick="eval([[ menu.url]]"。显示结果为onclick=""add()”"，点击无效。后来想起来js有eval函数，改成th:onclick="eval([[{menu.url}]])"。成功了。
不知道有没有更好的方法，网上搜了好久千篇一律都是传递参数。

createcloud
关注
thymeleaf 获取按钮的值onclick
weixin_42804250的博客
02-01 1356
获取对应按钮的值 如下li遍历的后台传送的数据时，对应li的值是变动的 <ul class="nav nav-pills" > <li th:each="partlist,partStat:${list}" th:id="${partlist.partId}" th:onclick="|getPartId(${partlist.partId} )|"> <a th:href="@{/law/criminallaw/{partId}(partId=${
thymeleaf的常用方法
yuzheh521的博客
03-18 660
thymeleaf的常用方法 使用之前要在html的标签加入 xmlns:th="http://www.thymeleaf.org" 例如: 路径,或者引入静态资源 语法:th:href="@{/}":可以直接获取项目的根目录 例如:th:href="@{/css/bootstrap.min.css}":引入css等静态资源 例如:th:href="@{/toUpdate}":跳转到toUp...
Spring boot + thymeleaf 后端直接给onclick函数赋值的实现代码
08-30
主要介绍了Spring boot + thymeleaf 后端直接给onclick函数赋值的实现代码,需要的朋友可以参考下
thymeleaf 的 th:onclick
银龙gg
09-22 1204
thymeleaf 的 th:onclick 引用的函数参数的入参是 model值的时候注意写法了。3.0.10 开始就变了。 改了好几个小时，总是不生效，实验了各种写法，终于搞清楚了。使用spingboot 2.1.1 (使用的就是)以上的都要注意了。 THYMELEAF 3.0.10更改日志 *改进了HTML事件处理程序属性（th：on ），以允许将其值作为内联JavaScript的片段（使...
spring boot + thymeleaf 后端直接给onclick函数赋值
gongzhao426177的专栏
06-21 1万+
这里是控制器里返回的 /** * @param pageUtil 分页工具类 * @param cliCorpQuery 查询类 * @param model model * @return String */ @RequestMapping(value = {"/list"}, method = Reque
thymeleaf th:onclick的使用
03-16
thymeleaf中的th:onclick可以用于在页面上定义一个点击事件。它的使用方式与HTML中的onclick属性类似，但是...在实际使用中，th:onclick通常与th:attr结合使用，将生成的事件处理函数赋值给一个HTML元素的onclick属性。
<!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <head> <th:block th:include="include :: header('123456789')"/> <th:block th:include="include :: datetimepicker-css"/> <!-- <th:block th:include="include :: datetimepicker-css"/>--> <th:block th:include="include :: bootstrap-fileinput-css"/> </head> <style> </style> <body> <div> <div> <input type="text" name="filex" id="inputfile"> <div class='file-loading'> <input class='form-control file-upload' name='file' type='file' id="filex"> </div> </div> <div> <button onclick="chuli()">确定</button> </div> </div> <th:block th:include="include :: footer"/> <th:block th:include="include :: echarts-js"/> <th:block th:include="include :: datetimepicker-js"/> <th:block th:include="include :: bootstrap-fileinput-js"/> <script th:inline="javascript"> $(".file-upload").fileinput({ uploadUrl: ctx + 'common/upload', maxFileCount: 1, autoReplace: true, showPreview: false }).on('fileuploaded', function (event, data, previewId, index) { $("input[name='" + event.currentTarget.id + "']").val(data.response.url) }).on('fileremoved', function (event, id, index) { $("input[name='" + event.currentTarget.id + "']").val('') }) function chuli() { const x = document.getElementById("inputfile"); alert(x.value); } </script> </body> </html> 我使用的ruoyi框架，是bootstrap版本的，这是我的代码，我现在是通过组件打开的，我现在希望我点击确定能把我拿到的值传回上一个页面
09-09
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"> <th:block th:include="include :: header('123456789')"/> <th:block th:include="include :: ...
Tyemeleaf th:each使用在td标签里
最新发布
10-30
在 `td` 标签中，除了显示列表项的属性值，还使用 `th:onclick` 绑定了点击事件，将当前列表项的属性值作为参数传递给 JavaScript 函数 [^3]。 ### 获取迭代状态 在 `th:each` 中可以获取当前迭代的状态信息，例如...
第六章 Web开发：Thymeleaf模板引擎
上官花雨滴博客！！！
09-20 771
模板引擎是为了使用户界面与业务数据(内容)分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。模板引擎的实现方式有很多，最简单的是"置换型"模板引擎，这类模板引擎只是将指定模板内容(字符串)中的特定标记(子字符串)替换，便生成了最终需要的业务数据(如网页)。"置换型"模板引擎实现简单，但其效率低下，无法满足高负载的应用需求(比如有海量访问的网站)，因此还出现了"解释型"模板引擎和"编译型"模板引擎等。
thymeleaf 的 th:onclick，小心采坑
qq_63462564的博客
05-25 672
thymeleaf 的 th:onclick，小心采坑
thymeleaf 的 th:onclick，慢慢采坑
热门推荐
u010592926的专栏
01-12 5万+
这里写自定义目录标题thymeleaf 的 th:onclick 引用的函数参数的入参是 model值的时候注意写法了。3.0.10 开始就变了。 thymeleaf 的 th:onclick 引用的函数参数的入参是 model值的时候注意写法了。3.0.10 开始就变了。 改了好几个小时，总是不生效，实验了各种写法，终于搞清楚了。使用spingboot 2.1.1 (使用的就是)以上的都要注意了...
关于thymeleaf的th:onclick传值
s_sos0的博客
01-24 664
不多废话 下面这样 th:onclick="'javascript:方法名(\''+${值}+'\');'"
thymeleaf th:onclick
caileigood的博客
09-25 1149
之前怎么用参数都错，终于对了，记录一下 th:onclick="'javascript:downloadMainFile(\''+${mainFile.filePath}+'\', this)'"
thymeleaf添加点击事件 “th:onclick”传参使页面报错问题
javabasic----Java基础篇（一）
07-21 3126
thymeleaf th:onclick传参问题解决 最近在开发过程中遇到springBoot使用thymeleaf模板引擎，添加点击事件会使页面报错的问题，下面分享一下自己的解决方法。 一：可能是版本问题，在springboot2.0.0版本中使用下面写法会报错。 <li th:each="city:${cityList}"> <a href="#" th:onclick="getSchoolList([[${city.id}]],[[${city.cityName}]]);
thymeleaf页面中使用th:onclick标签的使用方式一
qq_43987149的博客
05-02 1803
1、 方法一 th:onclick="removeItem('[[${orderItem.productOrderItem_id}]]')" 这里的'[[${orderItem.productOrderItem_id}]]'这个是重点，其他的值是正常写，这个是写动态的值的方法'[[${动态的值]]' 2、 原理 这个和HTML中使用thymeleaf模板写js代码类似，获取动态值的话需要用到[[]] 参考：https://blog.youkuaiyun.com/liaomingwu/article/details/9
SpringBoot集成ThymeLeaf页面中使用th:onclick
那些年的代码
08-27 942
在SpringBoot集成ThymeLeaf页面中使用th:onclick方法且带动态参数时,按照传统想法直接写是报错的,网络上提供了两种方法: 方法一: th:οnclick="'saveConfig(&quot ;'+${viewInstrument[12]}+'&quot ;)'" 1 其中，&quot ;是“的意思，其实&quot ;中没有空格，但是...
thymeleaf页面中使用th:onclick标签
麦叔
04-17 9443
在SpringBoot集成ThymeLeaf页面中使用th:onclick方法且带动态参数时,按照传统想法直接写是报错的,网络上提供了两种方法: 方法一: th:"'saveConfig(&quot ;'+${viewInstrument[12]}+'&quot ;)'" 其中，&quot ;是“的意思，其实&quot ;中没有空格，但是如果有空格就自动识别为”...
Thymeleaf 标签学习 之 th:onclick 的使用
嘟噜熊恋爱.
03-03 2630
Thymeleaf 标签 th:onclick的使用
thymeleaf中使用th:onclick出现的问题
zhoujian_Liu的博客
02-11 8033
在springboot2.x的环境中使用thymeleaf的onclick时，若安照如下方式使用onclick，就会报错TemplateProcessingException异常。 &lt;tr th:each="region, regionStat: ${regions}"&gt; &lt;a th:attr="data-bind=${region.enName}" href="...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值