angular-ui ng-grid如何使聚合行成爲一個可編輯的行

我認爲我試圖實現的是在ng-grid中有tree-like。我沒有找到這樣的實現，但我不知道我是否可以使用分組機制angular-ui ng-grid如何使聚合行成爲一個可編輯的行

grid example

我需要有組頭在相同的方式在它下面的行編輯（見圖片上面），具有完全相同的可編輯單元，充當主控行。從標題組更新一個單元格時，應更新該組下的所有單元格。

從納克網文檔http://angular-ui.github.io/ng-grid/：

爲aggregateTemplate默認值：

<div ng-click="row.toggleExpand()" ng-style="{'left': row.offsetleft}" class="ngAggregate"> 
     <span class="ngAggregateText">{{row.label CUSTOM_FILTERS}} ({{row.totalChildren()}} {{AggItemsLabel}})</span> 
     <div class="{{row.aggClass()}}"></div> 
    </div>

是否有可能爲了跟我描述來呈現集聚行使用此選項？

來源

2013-07-29 lucian

下面的答案/評論是有關狀結構樹並沒有涉及到製造集聚行編輯...

如果您正在尋找在NG-電網樹狀結構，則可以實現與ng-if,ng-click以及在單擊特定行時更新ng-grid data選項的API的組合。這裏是一個樣本plnkr。

單擊父行時，將調用切換功能以將子行添加到/刪除到ng-griddata。（請參閱我的plunker代碼以獲取完整詳細信息）

$scope.toggleDisplay = function(iType) { 
    $scope.displayItemDetails[iType] = $scope.displayItemDetails[iType] ? 0 : 1; 
    $scope.selItems = $scope.updateTable(); 
}; 


$scope.updateTable = function() { 
    var selItems = []; 
    for (var i in $scope.allItems) { 
    var iType = $scope.allItems[i]["Type"]; 

    if (angular.isUndefined($scope.displayItemDetails[iType])) { 
     $scope.displayItemDetails[iType] = 0; 
    } 

    if (1 == $scope.displayItemDetails[iType]) { 
     $scope.allItems[i]["Summary"] = '-'; 
    } else { 
     $scope.allItems[i]["Summary"] = '+'; 
    } 
    selItems.push($scope.allItems[i]); 

    if ($scope.displayItemDetails[iType]) { 
     for (var j in $scope.allItems[i]["Details"]) { 
     $scope.allItems[i]["Details"][j]["Summary"] = ""; 
     selItems.push($scope.allItems[i]["Details"][j]); 
     } 
    } 

    } 
    return selItems; 
}; 

$scope.gridOptions = { 
    data: 'selItems', 
    columnDefs: [{ 
    field: 'Summary', 
    displayName: '', 
    cellTemplate: summaryCellTemplate, 
    width: 30 
    }, { 
    field: 'Name', 
    displayName: 'Name', 
    }, { 
    field: 'Type', 
    displayName: 'Type', 
    }, { 
    field: 'Cost', 
    displayName: 'Cost', 
    }, { 
    field: 'Quantity', 
    displayName: 'Quantity', 
    }], 
    enableCellSelection: false, 
    enableColumnResize: true 
};

來源

2015-03-09 07:07:38 abhijithda

angular-ui ng-grid如何使聚合行成爲一個可編輯的行

回答

相關問題