黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发第 2 章 品牌管理 七 [打印本页]

---

作者: 我是楠楠    时间: 2020-5-7 14:12
标题: 【郑州校区】品优购电商系统开发第 2 章 品牌管理 七

【郑州校区】品优购电商系统开发第 2 章 品牌管理 七

6.删除品牌
6.1 需求分析
点击列表前的复选框，点击删除按钮，删除选中的品牌。

6.2 后端代码
6.2.1 服务接口层
在 pinyougou-sellergoods-interface 的 BrandService.java 接口定义方法

[AppleScript] 纯文本查看 复制代码

 /**

* 批量删除

* @param ids

*/

public void delete(Long [] ids);

6.2.2 服务实现层
在 pinyougou-sellergoods-service 的 BrandServiceImpl.java 实现该方法

[AppleScript] 纯文本查看 复制代码

/**

* 批量删除

*/

@Override

public void delete(Long[] ids) {

for(Long id:ids){

brandMapper.deleteByPrimaryKey(id);

}

}

6.2.3 控制层
在 pinyougou-manager-web 的 BrandController.java 中增加方法

[AppleScript] 纯文本查看 复制代码

 /**

* 批量删除

* @param ids

* @return

*/

@RequestMapping("/delete")

public Result delete(Long [] ids){

try {

brandService.delete(ids);

return new Result(true, "删除成功");

} catch (Exception e) {

e.printStackTrace();

return new Result(false, "删除失败");

}

}

6.3 前端代码
6.3.1 JS
主要思路：我们需要定义一个用于存储选中 ID 的数组，当我们点击复选框后判断是选择还是取消选择，如果是选择就加到数组中，如果是取消选择就从数组中移除。在点击删除按钮时需要用到这个存储了 ID 的数组。
这里我们补充一下 JS 的关于数组操作的知识
（1）数组的 push 方法：向数组中添加元素
（2）数组的 splice 方法：从数组的指定位置移除指定个数的元素 ，参数 1 为位置 ，参数2 位移除的个数
（3）复选框的 checked 属性：用于判断是否被选中

[AppleScript] 纯文本查看 复制代码

$scope.selectIds=[];//选中的 ID 集合

//更新复选

$scope.updateSelection = function($event, id) {

if($event.target.checked){//如果是被选中,则增加到数组

$scope.selectIds.push( id);

}else{

var idx = $scope.selectIds.indexOf(id);

$scope.selectIds.splice(idx, 1);//删除

}

}

//批量删除

$scope.dele=function(){

//获取选中的复选框

$http.get('../brand/delete.do?ids='+$scope.selectIds).success(

function(response){

if(response.success){

$scope.reloadList();//刷新列表

}

}

);

}

6.3.2 HTML
（1）修改列表的复选框

[AppleScript] 纯文本查看 复制代码

<input type="checkbox" ng-click="updateSelection($event,entity.id)"> 

（2）修改删除按钮

[AppleScript] 纯文本查看 复制代码

 <button type="button" class="btn btn-default" title="删除" ng-click="dele()"><i

class="fa fa-trash-o"></i> 删除</button> 

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2