当前课程知识点:软件开发实训--动态网站开发 > 7 用户管理功能实现二 > 7.4多个用户删除实现 > 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
所以它出现了重复
当我们点击第一次时
它把选中的数据放到里边了
当我们点击第二次时
它又放进去了
可我们当点第三次时
它依然会把它不停的放进去
每次都从头把全部选择的信息放进去
因此上我们需要在点击的时候
对它进行一次初始化
让它置空
这样避免它
把重复性的数据把上一次
填充的数据
这次又给填充一遍
刷新我们来看一下
这样就正常了
好
回过头来,把我们注示的表单提交
给它去掉
刷新后我们来删除
已经正常删除了
这就是我们关于删除操作的处理
包括一条信息的删除
和多条信息同时删除的方式
下去以后一定要把它多练习
好
关于多个用户信息的删除
就讲到这里
下节课我们再见
-1.1课程介绍
--1.1.3随堂测试
-1.2网站需求分析
--1.2.4随堂测试
-1.3网站首页分析
--1.3.3随堂测试
-1.4导航菜单分析
--1.4.3随堂测试
-1.5内容区域分析
--1.5.3随堂测试
-1.6内容副页面分析
-1.7编写需求文档
-2.1后端页面总体分析
--2.1.3随堂测试
-2.2用户管理功能设计
--2.2.3随堂测试
-2.3内容与分类功能分析
--2.3.3随堂测试
-2.4网站配置功能设计
--2.4.4随堂测试
-2.5数据库及表结构分析
-总体设计文档
-3.1前台模板约定
--3.1.3随堂测试
-3.2网站配置接口设计
--3.2.3随堂测试
-3.3菜单接口设计
--3.3.3随堂测试
-3.4内容接口设计
--3.4.3随堂测试
-3.5幻灯片接口设计
--3.5.3随堂测试
-补充设计文档
-4.1用户管理功能设计
--4.1.3随堂测试
-4.2菜单管理功能设计
--4.2.3随堂测试
-4.3内容管理功能设计
--4.3.3随堂测试
-4.4网站配置信息设计
--4.4.3随堂测试
-完成设计文档
-4.6随堂测试
-5.1开发环境搭建
--5.1.2随堂测试
-5.2Web前端环境搭建
-5.3创建用户实体
--5.3.2随堂测试
-5.4用户实体表创建与初始化
--5.4.2随堂测试
-5.5用户数据访问接口实现
--5.5.2随堂测试
-5.6环境搭建问题
-6.1用户服务层接口实现
--6.1.2随堂测试
-6.2用户列表和编辑控制器实现
--6.2.2随堂测试
-6.3用户存储和删除控制器实现
-6.4用户添加、编辑界面实现
-6.5用户管理添加用户调试
-7.1用户查询模板实现
--7.1.2随堂测试
-7.2用户信息编辑的实现
-7.3单个用户删除实现
-7.4多个用户删除实现
-8.1用户列表分页基本实现
-8.2用户列表查询结果分页实现
-8.3通用日期处理
-8.4整型日期处理
--8.4.2随堂测试
-8.5枚举数据的应用
-9.1登录逻辑实现
--9.1.2随堂测试
-9.2登录界面及流程调试
--9.2.2随堂测试
-9.3管理主界面实现
--9.3.2随堂测试
-9.4授权验证拦截器实现
--9.4.2随堂测试
-9.5拦截器调试
-10.1分类接口实现
-10.2分类添加、编辑实现
-10.3分类树结构实现
-10.4分类删除实现
--10.4.2随堂测试
-11.1内容实体定义
-11.2相关接口定义
-11.3服务接口实现
-11.4内容添加、编辑模板实现
-11.5内容添加、编辑控制器实现
-11.6内容检索页面实现
-11.7内容分类树实现
-12.1修改UEditor相关问题
-12.2整合UEditor到内容编辑界面
-12.3UEditor图片对话框应用
-12.4文件上传问题处理
-13.1网站配置相关类实现
-13.2网站配置界面模板实现
-13.3网站配置调试
-14.1网站首页布局实现
-14.2菜单Vue组件实现
--14.2.2随堂测试
-14.3幻灯片Vue组件实现
-14.4滚动Vue组件实现
--14.4.2随堂测试
-14.5滚动接口实现
-14.6滚动接口调试
-14.7幻灯片接口实现
-15.1首页区域实现
-15.2首页内容脚本实现
-15.3首页完善
-15.4Vue组件放入单文件
-15.5详细页面实现
-16.1网站测试介绍
-16.2功能测试
-16.3打包发布
-16.4部署运行
--16.4.2随堂测试