springboot thymeleaf 需要使用data-*,自定义属性,获取值

springboot thymeleaf的页面中,设置属性,一般都是使用th:text,这样的确是可以设置比如a的属性或者p等等的属性,现在我循环遍历,显示多个菜单的时候,我需要增加一个自定义的属性,以便于点击的时候能够传递参数,所以想到html中的data-ceshi,类似于这样的自定义属性,thymeleaf还真提供了这种形式,参考国外的问答网址如下

https://stackoverflow.com/questions/24411826/using-data-attribute-with-thymeleaf:


//其中data-el_id这个就是自定义的属性,你可以定义成任何你想要的格式比如data-ceshi,然后在js文件中使用jquery的$(this).data('ceshi')获取到
<div th:attr="data-el_id=${element.getId()}">
XML rules do not allow you to set an attribute twice in a tag, so you can't have more than one th:attr in the same element.

Note: If you want more that one attribute, separate the different attributes by comma:

<div th:attr="data-id=${element.getId()},data-name=${element.getN‌​ame()}"> 

   成功从js中获取到自定义data的标签属性.我的界面如下:

 <ul class="nav nav-second-level collapse">
     <li th:each="cmenu : ${menu.children}">
         <a class="menuItem" th:text="${cmenu.menuName}" th:href="@{${cmenu.url}}" th:attr="data-menuid=${cmenu.menuId}" >二级菜单</a>
      </li>
 </ul>
$.modal.loading("数据加载中,请稍后...");
        // 获取标识数据
        var dataUrl = $(this).attr('href'),
        dataIndex = $(this).data('index'),
        menuName = $.trim($(this).text()),
        flag = true;
        //获取点击的menuId,2018年7月10日13:39:25
        var menu_id = $(this).data('menuid');
        console.log("获取到的菜单ID为"+menu_id);
        

运行结果如下:



评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值