1. 程式人生 > >AngularJS的批量操作

AngularJS的批量操作

今天做一個批量修改的需求,算是對JS的學習吧。

介面:

<input type="checkbox" ng-model="isSelected(item.id)" ng-click="updateSelection=function ($event,item.id)">

JS:

$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("系統錯誤");
           })
        }
contrl:
@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;
	}
流程:介面上將選中的資料id傳到js中,存入到一個jsonArray中,然後在點選修改的時候觸發函式將集合傳遞到controller層中,將JSONaArray轉換成ArrayList,獲取需要修改的ID,Service層不再介紹。

由於對於前端的知識不太足夠,目前是初步的簡單實現,但是感覺程式碼有些不太好,後面會繼續優化。