AngularJS的批量操作
阿新 • • 發佈:2019-01-03
今天做一個批量修改的需求,算是對JS的學習吧。
介面:
<input type="checkbox" ng-model="isSelected(item.id)" ng-click="updateSelection=function ($event,item.id)">
JS:
contrl:$scope.selected =[]; var updateSelected=function (action,id) { if (action == 'add' && $scope.selected.indexOf(id) == -1){ $scope.selected.push(id); } if (action == 'remove' && $scope.selected.indexOf(id) != -1){ var idx=$scope.selected.indexOf(id); $scope.selected.splice(idx,1); } //console.log($scope.selected) } $scope.updateSelection=function ($event,id) { var checkbox = $event.target; var action=(checkbox.checked ? 'add' :'remove'); updateSelected(action,id); } $scope.isSelected=function (id) { return $scope.selected.indexOf(id) >= 0; } $scope.alldelete=function () { console.log('將選中的開始修改status:'+$scope.selected); var data={ arr:$scope.selected } productService.updateAllselect.save(data,function (response) { if (coreService.okStatus(response)) { logger.logSuccess("操作成功"); $scope.loadPage(); } else { logger.logError("操作失敗"); } }, function(err) { logger.logError("系統錯誤"); }) }
流程:介面上將選中的資料id傳到js中,存入到一個jsonArray中,然後在點選修改的時候觸發函式將集合傳遞到controller層中,將JSONaArray轉換成ArrayList,獲取需要修改的ID,Service層不再介紹。@RequestMapping(value = "/updateAllselect", method = RequestMethod.POST) public @ResponseBody BaseModel<ProductDetailVO> updateAllselect(){ BaseModel<ProductDetailVO> res = new BaseModel<>(); JSONObject param = this.convertRequestBody(); JSONArray arrays=param.getJSONArray("arr"); List list=new ArrayList(); for (int i=0;i<arrays.size();i++){ list.add(arrays.get(i)); } productService.updateAllselect(list); return res; }
由於對於前端的知識不太足夠,目前是初步的簡單實現,但是感覺程式碼有些不太好,後面會繼續優化。