1.1 实现思路
- 明确需求,点击列表的修改按钮,弹出窗口,修改数据后点击“保存”执行保存操作。
- 弹出窗口最关键的是这一行的数据怎么获取到?先为修改按钮注册点击事件,一点击获取这一行的数据(因为这三列数据都有了,不需要再通过主键id去查询,性能比较低)
- 为按钮绑定点击事件 ng-click="show(entity)" ,一点击把这一行json数据获取到了(entity)。
- 把entity放到scope里面,在添加或修改品牌方法里面做判断,定义请求URL,开始定义的是添加的url,判断scope的entity是否有这个id,有id则是做修改,把请求地址修改成update,然后在异步请求处加上url,
- 此时还存在一点小问题:为修改按钮绑定点击事件: $scope.show=function(entity){
$scope.entity=entity;
};- 第5点解决方案:$scope.entity与等号右边的entity是同一个json对象,这时候需要把右边的entity转换成新的json字符串
把json字符串转换成新的json对象
1.2 需求分析
点击列表的修改按钮,弹出窗口,修改数据后点“保存”执行保存操作
1.3 前端代码实现
1.3.1 实现数据绑定
在sunny-manager-web/src/main/webapp/admin/brand.html页面中,增加JS代码显示修改窗口:
// 为修改按钮绑定点击事件 $scope.show = function (entity) { // 把entity转化成json字符串 var jsonStr = JSON.stringify(entity); // 把json字符串转化成新的json对象 $scope.entity = JSON.parse(jsonStr); };
修改列表中的“修改”按钮,调用此方法执行表单数据绑定:
<button type="button" class="btn bg-olive btn-xs"
data-toggle="modal"
data-target="#editModal"
ng-click="show(entity);">修改</button>
1.3.2 保存数据
修改JS的$scope.saveOrUpdate方法:
/** 添加或修改 */
$scope.saveOrUpdate = function(){
/** 定义请求URL */
var url = "save"; // 添加品牌
if ($scope.entity.id){
url = "update"; // 修改品牌
}
/** 发送post请求 */
$http.post("/brand/" + url, $scope.entity)
.then(function(response){
if (response.data){
/** 重新加载品牌数据 */
$scope.findAll();
}else{
alert("操作失败!");
}
});
};
1.4 后端代码实现
1.4.1 控制器层
sunny-manager-web/src/main/java/com.sunny.manager.controller的BrandController.java新增方法:
/**修改品牌*/ @PostMapping("/update") public boolean update(@RequestBody Brand brand){ try { brandService.update(brand); return true; } catch (Exception e) { e.printStackTrace(); } return false; }
1.4.2 服务实现层
sunny-sellergoods-service/src/main/java/com.sunny.sellergoods.service.impl的BrandServiceImpl.java实现方法:
/** 修改品牌 */ @Override public void update(Brand brand){ try { // 选择性修改(它会判断Brand实体中的属性是否有值,有值就生成到update语句中) brandMapper.updateByPrimaryKeySelective(brand); }catch (Exception ex){ throw new RuntimeException(ex); } }