7.4.1多个用户删除实现在线视频

同学你好

欢迎回到软件开发实训课堂

上节课咱们讲了如何去删除一个用户的操作

那么对于删除多个用户该如何实现呢

为了完成一次性删除多个用户的话

我们需要选择框，一个复选框

是需要一个删除的按钮

同样的，打开我们的listusers

这个模板

在我们的搜索按钮之后

加一个删除按钮

这个按钮我们可以给它颜色为红色

那么当删除按钮被点击时

它应该执行的是

多个删除操作

那么既然要选择多个

我们就需要有一个复选框

在我们的tbody的数据区域

第一个单元格里

我们增加复选框

同时把它原来显示的内容放在一个span中

复选框绑定

一个值

我们这里是th value

它绑定的值是uid

然后我们给他一个class

就叫做cuid

有了这一行以后呢

我们在界面上就可以看到每一条数据的前面

会有一个复选框

然后我们给它添加事件

当我们点击这个复选框时

我们去把所有被选择到的复选框

都给它记录下来

我们在这里定义一个对象

叫uids

而uids的对象里有一个数组

现在我们来处理它

因为我们是文档加载完成之后才执行的

所以我这里直接就可以写

cuid这个类的可立刻实践了

因为标签已经加载完成了

当点击它的时候

我们获取所有的cuid

并且被选中的cuid

把它都拿到

然后进行each处理

也就是对它的每一个被选择的复选框进行处理

处理它什么呢

把它的值填充进去

这里边需要注意是两次uids

把复选框的值

填充上

要注意

这里面我们可以看到用冒号check的

这个val呢

我们得到了所有被选择的复选框

然后把它们的值放到了uids里边

uids然后我们去点击删除按钮

当我们点击删除按钮时

注意这个删除按钮和我们

单条数据的删除按钮不一样

所以我们给它加一个S

然后我们去处理它

多一个S

当点击这个按钮时，我们执行这个动作

这是多条信息删除

它删除的时候

首先我们来判断uid是否为空

uids.uids.length小于等于0

我们就不让它有任何动作

但是如果它有数据了

我们就得确认是否删除

提示用户

这里是“确认要删除被选择的信息吗”

一样的这个操作不可恢复

也可以加上请谨慎操作等等

如果说用户点击的是确定

我确定要删除

这个时候我们应该删除它的信息

首先是把信息变成json数据

然后呢 提交删除操作

location.href 我们用的是json传递

所以这里边直接删除就行了

users

/+json

好

现在我们就来测试一下

我们先去添加几个用户

再来添加

每次我们都去地址栏输入信息

显得非常的不方便

为了解决这个问题

我们在列表页添加一个按钮

专门来转向到添加

在我们的删除后面

加一个超链接

这里我们可以用动态计算地址

地址是/

edituser

我们是新加

所以不需要参数

这里写添加用户

class呢

btn -primary

我们依然用蓝色的

可以把它放在删除的前面

好

这个class样式

少了一个btn

然后回过来就可以了

现在我们要添加只需要点击添加用户这个按钮

就会进入到添加里边去

看一下，下面的信息

不是唯一的id#password

这个信息来自于哪里呢

就是隐藏的password这块值

我们来看一下

这是因为我们对password进行处理的时候

出现了两个

一个隐藏的password

这是为了避免空的问题

那么我们可以让它不出现

什么时候出现呢

和下面这个是相反的

那就是把这个条件同样的拿过来

条件是一样

只不过一个用的是if条件

一个用的是unless条件

这样它们两个就会错开

好

现在我们来看一下

多个删除是否能够成功

我们把3和4选中

然后点击删除操作

可见它已经进入到删除

然后提示了这么一个信息

我们如果点击取消的话

它没有动作

当我们点击确定他应该删除这条信息

看一下我们点击删除后

它给出的消息是这样子的

这里出现了一个错误的请求

这是因为我们使用了

控制器里面使用的是

Get请求模式

也就是串里面uids它的格式

是不被允许的

那么要想允许我们需要进行url的编码转换

为了解决这个问题

我们直接使用post请求来传递数据

但是post的请求

当我们请求完成后

就发送到listusers里边去

这样的话让它去转向到列表页了

可是我们在界面上如何来传递post

这就需要我们来做一个简单的处理

怎么来处理呢

找到我们的删除按钮

在这里我们添加一个隐藏域

这个隐藏域

我们就放一个uids这样的Json字符串

给它一个ID为deleteuids

这样我们能快速的获取到隐藏的域

好

当我们得到的时候

先去填充它

用jQuery来填充

把json字符串给它填充进去

然后我们提交表单要注意

这个表单它提交给的是listusers

这已经不是我们要的表单了

所以我们要对表单的action进行修改

我们把它叫form1

这样

我们讲form1

改变它的action属性

改成什么呢

deleteusers

然后将form1提交就可以了

这是借助于别的form来提交的一种方式

当然你也可以不这么做

用ajaxs的请求方式也是可以的

我们这里用了一个表单来提交他

同样的

在控制器这边

deletes方法的就不能从路径来获取这个uids了

它直接通过参数来获取

好

我们来看一下是否能够拿得到这个数据

刷新我们的列表页

然后选择两条数据

点击删除

这里边我们看到了有一个user

它的值为空

看发生了什么信息删除实例

被传递到一个空对象

好

我们来看它既然是空的话

我们就在这里来看一下它提交过来的数据

我们可以用拦截

也可以直接去输出一下

看一下我们的输出

刷新界面我们提交的情况

正好赶到我们服务器重启

点击删除

看一下

过来的信息是这样子的

也就是说它把所有的内容都转换成了字符串

它也确实数据获得到了

也就是说uids传递过来了

然后我们解析成为json数据

看对象

通过uids我们得到一个json数组

uids得到json数组

“10” “9” “10”

为什么是这样子

多了一个数据

我们只选择了两个

也就是说它删除第三个的时候

发现这个user已经不存在了

这是怎么回事呢

我们来看一下

问题

我们先把它输出来

通过控制台

我们就可以得到

我们到底输出了什么

选择3和4

好

我们先不要去提交

这样的话

我们就能够快速的看到它

否则的话它太快一闪而过

看一下

它已经选择了两个

这个是怎么得到的呢

还是我们前面

当我们点击时

我们对所有的代码进行处理

可是每次点击我们都进行了push

所以它出现了重复

当我们点击第一次时

它把选中的数据放到里边了

当我们点击第二次时

它又放进去了

可我们当点第三次时

它依然会把它不停的放进去

每次都从头把全部选择的信息放进去

因此上我们需要在点击的时候

对它进行一次初始化

让它置空

这样避免它

把重复性的数据把上一次

填充的数据

这次又给填充一遍

刷新我们来看一下

这样就正常了

好

回过头来，把我们注示的表单提交

给它去掉

刷新后我们来删除

已经正常删除了

这就是我们关于删除操作的处理

包括一条信息的删除

和多条信息同时删除的方式

下去以后一定要把它多练习

好

关于多个用户信息的删除

就讲到这里

下节课我们再见