thymeleaf+js实现单个删除和多选删除的功能

本文介绍了如何结合Thymeleaf和JavaScript实现前端的单个及多选删除功能。在删除操作前,通过提示用户并依据用户选择决定是否继续。在点击删除按钮时,首先执行JavaScript的onclick事件,根据其返回值来判断是否执行href链接进行实际删除操作。示例中提供了单个删除和多选删除的代码实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在删除前我们需要给用户提示,根据用户选择来进行判断是否删除,当onclick和href同时使用的时候,会先执行onclick,根据onclick返回值及逆行判断是否执行href链接。

此处给出示例代码:

--------------------------------------------------------------------------------------------------------------------------------------

单个删除(id的值为后台传过来的值):

 

<a class="button border-red" href="#" th:href="@{/hr/del/{id}(id=${position.posno})}"
                   onclick="return del()" th:value="${position.posno}" value="1">
                    <span class="icon-trash-o"></span> 删除
</a>th:href="@{/hr/del/{id}(id=${position.posno})}"
                   οnclick="return del()" th:value="${position.posno}" value="1">
                    <span class="icon-trash-o"></span> 删除
</a>

 

js:

 

function del() {
        if (confirm("您确定要删除吗?")) {
            return true;
        } else {
            return false;
        }
}


--------------------------------------------------------------------------------------------------------------------------------------

 

多选删除

多选框checkbox:

 

    <td style="text-align:left; padding-left:20px;">
            <input type="checkbox" name="id[]" value="" id="id[]" th:value="${position.posno}"/>
     </td>id[]" value="" id="id[]" th:value="${position.posno}"/>
     </td>

 

 

删除按钮:

 

<button class="button border-red" onclick="DelSelect()"><span class="icon-trash-o"></span> 批量删除</button>DelSelect()"><span class="icon-trash-o"></span> 批量删除</button>

 

 

 


js代码:

 

 

 

function DelSelect() {
        var Checkbox = false;
        $("input[name='id[]']").each(function() {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {
            var t = confirm("您确认要删除选中的内容吗?");
            if (t == false) {
                return false;
            } else {
                var checkedID="";
                $("input[name='id[]']").each(function() {
                    if (this.checked == true) {
                        checkedID += this.value + ",";

                    }
                });
                window.location.replace("/hr/delSelected?checkedID="+checkedID);
            }
        } else {
            alert("请选择您要删除的内容!");
            return false;
        }
    }

 

 

 

 

 

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值