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

最新推荐文章于 2022-12-22 00:02:56 发布

原创最新推荐文章于 2022-12-22 00:02:56 发布 · 7.2k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#thymeleaf #多选框 #删除 #js

Web 同时被 2 个专栏收录

2 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

本文介绍了如何结合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;
        }
    }