2015-04-12 55 views
3

{{的HelloWorld}}Angularjs UI格每列的總計行內

我試圖訪問其他列中的值相同的行中角UI的網格。我有兩個相關的問題。

  1. 如何從同一行的多個列中添加值以獲得Total?
  2. 如何使用行索引將其作爲參數傳遞並刪除當前行?

enter image description here

,你可以在上面的圖片中看到,那我找只涉及到整數值的彙總,而不是初始的字符串。
此外,按鈕與X應單擊刪除行。這些行動態地包含在網格中。

我已經通過了UI Grid Tutorial,但這些例子並未顯示如何完成我的任何一個問題。

我的頁腳工作正常。它的配置以進行總共而是列在整套行:

enter image description here

這裏是我的代碼有什麼我迄今發現一點點:

var removeTemplate = '<button type="button" class="grid-remove btn btn-default btn-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true" ng-click="removeRow($event, row.entity)"></span></button>'; 

$scope.gridAccountableHours = { 
    enableCellEditOnFocus: true, 
    showColumnFooter: true 
}; 

$scope.gridAccountableHours.columnDefs = [ 
    { name: "contractCode", displayName: ""}, 
    { name: "hours1", displayName: "1", type: "number" }, 
    { name: "hours2", displayName: "2", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "hours3", displayName: "3", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "hours4", displayName: "4", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "hours5", displayName: "5", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "hours6", displayName: "6", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "hours7", displayName: "7", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "hours8", displayName: "8", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "hours9", displayName: "9", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "hours10", displayName: "10", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "hours11", displayName: "11", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "hours12", displayName: "12", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "hours13", displayName: "13", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "hours14", displayName: "14", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "hours15", displayName: "15", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum }, 
    { name: "total", displayName: "Total" }, 
    { name: "remove", displayName: "", cellTemplate: removeTemplate } 
]; 

$scope.removeRow = function ($event, entity) { 
    $event.stopPropagation(); 
    $scope.gridAccountableHours.data.splice($scope.gridAccountableHours.data.indexOf(entity), 1); 
}; 

我欣賞你的時間。

回答

2

在網格中總共可以使用gridRow上的函數。

$scope.gridAccountableHours.forEach(function(rowEntity) { 
    rowEntity.total = function() { 
    var total = 0; 
    for(var 1 = 1; i++; i<=15){ 
     total += this['hours'+i]; 
    } 
    }; 
}); 

您的總列def應該自動綁定到這個總函數。請參閱http://ui-grid.info/docs/#/tutorial/106_binding

對於刪除按鈕,你就會錯失另外,AppScope,請參閱http://ui-grid.info/docs/#/tutorial/305_appScope

您的模板NG-點擊應該是:

ng-click="grid.appScope.removeRow($event, row.entity)" 
+0

這兩種解決方案的工作。我更喜歡在每個領域單獨完成總結,並且工作得很好。謝謝保羅。我希望這可以幫助別人。 – euther