2017-03-23 6 views
1

필드 기능이있는 TOTAL 열을 계산하려고합니다. 여기에 지금까지이 작업은 다음과 같습니다 https://plnkr.co/edit/vhstPeg2BYz1oWGGwido?p=preview필드 기능이있는 열 합계를 얻는 방법은 무엇입니까?

var app = angular.module('myApp', ['ui.grid']); 
app.controller('MyCtrl', function($scope) { 
$scope.myData = [ 
     {x: 1, y: 50}, 
       {x: 4, y: 43}, 
        {x: 12,y: 27}, 
        {x: 9, y: 29}, 
        {x: 23, y: 34 }]; 

    angular.forEach($scope.myData,function(row){ 
     row.getTotal = function(){ 
     return this.x + this.y ; 
     }; 
    }); 




$scope.gridOptionsString = { 
    data: 'myData', 
    columnDefs: [{field: 'x', displayName: 'x'}, 
       {field:'y', displayName:'y'}, 
       {field: 'getTotal()', displayName: 'sum'}, 
       ] 
    }; 

}); 

감사합니다!

답변

1

이 그것을 수행해야합니다

angularjs ui-grid custom column total

관련 코드를 컨트롤러에서 :

var used = []; 
$scope.grandTotal = 0; 
angular.forEach($scope.myData,function(row,idx){ 
    row.getTotal = function(){ 
    if (used.indexOf(idx) == -1) { 
     $scope.grandTotal += this.x + this.y; 
     used.push(idx); 
    } 
    return this.x + this.y ; 
    }; 
}); 

업데이트 된 Plunker

, 여기 http://plnkr.co/edit/1FHgSViYgpfXgQEPfXr5?p=preview입니다. 컨트롤러에서

angularjs ui-grid custom column total

관련 코드 :

var used = []; 
$scope.grandTotal = 0; 
angular.forEach($scope.myData, function(row, idx) { 
    row.getTotal = function() { 
    var value; 
    if (this.xBox) { 
     value = this.x + this.z; 
    } else if (this.yBox) { 
     value = this.y + this.z; 
    } 
    if (used.indexOf(idx) == -1) { 
     $scope.grandTotal += value; 
     used.push(idx); 
    } 
    return value; 
    }; 
}); 
$scope.updateXRowClear = function(row) { 
    row.entity.yBox = false; 
    /* Need to check the ybox cell when unchecked */ 
    if (row.entity.xBox === false) { 
    row.entity.yBox = true; 
    $scope.grandTotal += row.entity.y - row.entity.x; 
    } else { 
    $scope.grandTotal += row.entity.x - row.entity.y; 
    } 
}; 
$scope.updateYRowClear = function(row) { 
    row.entity.xBox = false; 
    /* Need to check the xbox cell when unchecked */ 
    if (row.entity.yBox === false) { 
    row.entity.xBox = true; 
    $scope.grandTotal += row.entity.x - row.entity.y; 
    } else { 
    $scope.grandTotal += row.entity.y - row.entity.x; 
    } 
}; 

새로운 업데이트

업데이트

새로운 화면 레이아웃 (응답/plunker 링크 아래/코멘트 기준) Plunker, https://plnkr.co/edit/ixdN0J2oVvOlbbziJMCY?p=preview. 다시 업데이트

이 (아래 설명에 따라)

새로운 화면 레이아웃 :

angularjs ui-grid custom column total

컨트롤러에서 관련 코드 :

var used = []; 
$scope.grandTotal = 0; 
angular.forEach($scope.myData, function(row, idx) { 
    row.getTotal = function() { 
    var value; 
    if (this.xBox) { 
     value = this.x * this.qty; 
    } else if (this.yBox) { 
     value = this.y * this.qty; 
    } else if (this.zBox) { 
     value = this.z * this.qty; 
    } 
    if (used.indexOf(idx) == -1) { 
     $scope.grandTotal += value; 
     used.push(idx); 
    } 
    return value; 
    }; 
    $scope.$watch(
    function($scope) { 
     return row.getTotal(); 
    }, 
    function(newValue, oldValue) { 
     $scope.grandTotal += (newValue ? newValue : 0) - (oldValue ? oldValue : 0); 
    } 
); 
}); 
$scope.updateXRowClear = function(row) { 
    row.entity.yBox = false; 
    row.entity.zBox = false; 
    /* Need to check the ybox cell when unchecked */ 
    if (row.entity.xBox === false) { 
    row.entity.yBox = true; 
    } 
    if (row.entity.yBox === false) { 
    row.entity.xBox = true; 
    } 
}; 
$scope.updateYRowClear = function(row) { 
    row.entity.xBox = false; 
    row.entity.zBox = false; 
    /* Need to check the xbox cell when unchecked */ 
    if (row.entity.yBox === false) { 
    row.entity.xBox = true; 
    } else if (row.entity.xBox === false) { 
    row.entity.yBox = true; 
    } 
}; 
$scope.updateZRowClear = function(row) { 
    row.entity.xBox = false; 
    row.entity.yBox = false; 
    /* Need to check the zbox cell when unchecked */ 
    if (row.entity.zBox === false) { 
    row.entity.xBox = true; 
    } else if (row.entity.xBox === false) { 
    row.entity.zBox = true; 
    } else if (row.entity.yBox === false) { 
    row.entity.yBox = true; 
    } 
}; 

그리고 모든 중요한 작업 Plunker, https://plnkr.co/edit/1rRRWEIyQhKVkYRdtIFu?p=preview.

다른 질문이 있으면 언제든지 알려주세요. 기꺼이 도와주세요.

+0

감사합니다. Tim! 이제는 어떻게 동적으로 만들겠습니까? https://plnkr.co/edit/vhstPeg2BYz1oWGGwido?p=preview – UCDaCode

+0

동일한 체크 박스를 두 번 이상 클릭하면 통계가 증가합니다. – UCDaCode

+1

와우! 너 빠르네! 좋아, 두 가지 더 : 1. 이제 다른 열을 추가하고 싶습니다. 열 y에서 z로 전환 할 때 동적 총합이 올바르지 않습니다. 2. qty 열을 편집 할 때 Dynamic Total을 어떻게 업데이트합니까? PS 도움을 주시면 감사하겠습니다. =) – UCDaCode