4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/30-尚硅谷-云尚办公系统-角色管理前端-批量删除.mp4原创

各位同学大家好，下面呢，我们来实现角色管理中的下一个功能，批量删除功能，那首先解释一下什么叫批量删除，大家看我的页面中啊，我页面中呢，其实已经加了一部分，各位看这个地方。这是什么？是不是叫复选框啊？比如说我现在啊，我想做个功能，我想一次性删除多条记录，咱们之前删，每次是不是能删一条记录，那我删除多条我该怎么去做？所以这里边就叫批量删除，比如我现在啊，我在里边选择两个负向框，一个总经理，一个角色管理员，然后一会儿我在里面加一个按钮，叫批量删除，当我点击批量删除，把两条记录是不是给它都删掉，这个过程就叫批量删除，那下面呢，咱们把它做一个具体实现，咱们看该怎么去做。首先按照咱的过程啊，第一部分我在JS文件中把接口进行定义。

这个接口就是。批量删除，然后咱们把接口给它一个方法的名字，我们叫这个。瑞木。在里边呢，加相关参数，因为它传的是多个ID，这个数组就是一个数据啊，把这个过来，然后之后按照结构加上相关的路径，这路径我从结口中找一下，我们就要半尺木，用的是比例的提交，然后用的是块body底。这里给他改一下啊。加上这个I list，通过把式过去，现在口完成了，完成之后我们第二部分在页面中呢，咱把那个按钮给它加上。咱们找到课件中啊，之前我们加了一个添加，现在咱们加一个叫批量删除，把这个给它加进去，那我们找到添加那个按钮位置就是刚才的。

找到啊，应该是在我们的。这个地方啊，在这里咱再添加下面加一个批量删除，然后里边有个方法叫半尺remove啊，现在把这个就加上了，加上之后看一下页面的效果是不是这样子啊，但这么放看着它不太美观，咱把两按钮放到下边去吧啊，为了看得更美观一点啊，我又把div给他。复制到下面去。放到这个表格的下面，就是看着更加美观一点啊。来放到这个位置这里啊。然后咱再看一下。这么看啊，更美观点，然后现在我们要实验的效果就是，比如现在选择负向框，我点批量删除，把选择负向框的值这个数据给它删掉，这就叫这样删除，那咱们继续往下来做，这里边复选框我们已经加上了，怎么加的，看页面中啊，在这位置里边加一个叫type，等于selection，那就是向框，然后在里边呢，还加了一个事件select，这是由UI封装的，这事件中有个方法，这方法什么意思呢？给大家解释一下啊。

比如说我现在选择某个负向框，他也把这一行业中只取到，然后传到他的方法中去，方法中能得到你负向框所在每行的内容，那我下面呢，把这方法给它写下啊，咱们加到这位置。我写到这里，然后咱们先做一个简单测试，我们一点一点往下进行实现。里啊，然后里边来看啊，这置给加个数，比如这个。这里加个注释啊。选择了复选框之后。

会把复选框所在这行的内容给它进行传递。比如说你的这个selection里边就是我们每行的内容这个对象，它里边肯定会产生多行内容，比如我选择两个那就是两行，选择三个那就是三行，所以里面有多个我在上面呢，咱为了接收到这个值，这位置，我给它加上一个数组，为了能接收到啊，咱给它起个名字啊，这个。加上一个数组。为了获取到多个复选框啊，里边那个值啊，这是我们写到的啊，然后在这里我们给它做一个赋值，这次点。Selections。啊，等于这个selection。啊，如果你看着名字不好看，你可以改个名字啊，我就叫这个名字了，然后在这个位置我给他做个输出，那我们先做一个简单测试，看一下目前是什么效果。

我们写一下啊o log把这个给输出一下。所以现在啊，这个基本结构完成，完成之后，我们看一下当前的效果怎么样，把F12点开console里边一会儿会输出。然后大家看啊，如我选择你看是个输出，然后出内呢，这的I。编号有这个名称，有时间等等内容是不是都有，然后它的长度是一，比如现在啊，我再选一个，你看长度是不是二，把这两个内容你给它取掉，我再选一个长度是不是三，比如现在我去掉一个。是变成二。再去一个，那就是一啊，所以你发现每次选择复选方之后，它会把你选中这一行的内容给你传到方法中去，所以咱们得到就是这一行中的这个那种，这个我们就完成，完成之后下面咱们点击按钮进行批量删除，按钮的名字咱刚才看到了，我们再找一下啊，这个名字它叫半尺蕊木，所以我在下面。

加上这个方法，实现批量删除。节目啊，我们在里边啊，最终写一下，那怎么写，首先啊，在里边我们先做一个简单的判断，就是如果说你现在啊，一个都没有选择，我点批量删除肯定是上不了，咱们提示说请选择要删除记录，或者说请选择记录之后再进行删除，所以咱们先做个判断，那怎么判断呢？其实就根据这个。如果数组长度等于零，是不是就什么有选，那咱们就给它来个提示啊，我在里边写一下啊，加上if。然后判断。

Selections点上。如果它的值等于零，就是它的长度等于零，表示没有选择，那咱给它做一个提示，然后最终再加个退，让它进行返回，这个提示我从课件中直接咱们就复制一下啊，咱们找一下这个提示，比如说请选择要删除的记录。啊，这是我们做的这么一个判断，那咱们试一下效果啊，看一下怎么样。比如现在我先关掉啊，我先刷新。刷新之后什么都没有选点批量删除这么一个提示啊，请选择要深入记录，如果说你选择之后，那咱们就开始调用接口进行实现，但是调的时候呢，因为它也是删除功能，所以咱们还是加上这么一个确认框，用这个进行实现啊，我把这个就还是复制过来，刚才我们做删除中应该是用过的，加上一个确认框，确定就用这个Z方法。

这是咱们写到的啊，然后在里边加上这个箭头函数。咱们啊开始调用接口。A片里边批量删除，叫半尺名目。这个我们最后调用，然后里边传入咱们相关这个数据啊，但这个数据特别强调啊，因为数据呢，咱们要求啊，传的应该是长这个样子，是一个数组里边有多个ID值，而目前这值是没有，咱目前只有这个数组这个对象就是里边有每行那个数据的对象，所以需要把里边的ID值取到，然后给它变成这个样子才可以啊，这是我们要做的事情。咱们先加个变量一再完善啊，先给它加上会，咱再完善出来，然后这个ID等于一个数组，把它先过来。

爱迪，这位置我加上一个，继续加上这个，然后加上这个response。建造函数，然后在里边我们就完成最终操作，最终我们删除之后，咱们肯定是在里边刷新页面，然后提示信息啊，那我来做个操作啊，比如咱们做一个提示。就是按照还是我们的这个结构啊。这个。提示信息。呃，在这里啊，包括我们在刷新页面。就是这一次。点上这个fetch date，就咱们刚才写到，呃，找到啊，就是这个方法，呃，在这里啊，这个方法。应该在最下面，它就是它啊，因为咱们是查询所有嘛，用date进行实现。把这个啊给他。拿过来。所以现在啊，按照这个部分，咱们把这个最基础的结构就完成了，然后咱们再进一步进行完善。

完善什么呢？那就这个地方，现在咱要把数据最终变成这个样子，那怎么变呢？写一下啊，因为咱们当前选择的复选框的数据都是在这个数组里边。比如说这个select里边，这个数组中有咱们选择那个框所在这行的数据，那咱怎么做呢？大家想一下这该怎么做？你记住一个原则啊，如果咱们遇到数组，遇到集合，要么变历，要么返回，所以现在做法就是把数组进行遍历，得到里边的每个ID，然后放到这个ID中直接传就可以了，把它遍历就可以了。那怎么遍历多种写法，第一种方式你可以写一个for，循环遍历是可以的啊，但是我现在给大家换一种写法啊，这个写法跟Java中类似。

this.selections点上一个叫for each啊，它里面有这种写法啊，点上一个叫for each这个。然后在里边你看啊，加的是不是有个箭头函数，比如咱们改个名字啊，我习惯叫item，叫别的也可以，然后it里边取它的ID值，就是点ID啊，取这个值我们来一个ID。把ID放到这个数组中去，id.put。就这个啊啊，不是put加上这个ID，所以现在这部分就完成了，把数组历取到每行中的ID值，把每行中的ID放到ID立特数组中，最终传递就可以了，所以以上批量删除我们就完成了啊，这是我们做的前端的整合。完成之后最后呢，咱把效果最终试一下啊，看一下最后结果。

我们来做个测试啊。比如说你看现在五条记录，我就把第一条、第二条删掉，现在我都选择了点批量删除提示信息，点确定。大家看是不是成功了，然后你看最终是不是有三条记录，那两条我们应该是都给它删掉了，到数据库表里边看一下。是不是都删掉了，所以现在啊，角色管理的前端部分我们就最终完成了，咱们分别实现了角色的条件分页查询，角色的删除，添加修改以及培养删除。