Angularjs 如何使聚合行成为可编辑行
我认为我试图实现的是在Angularjs 如何使聚合行成为可编辑行,angularjs,angular-ui,ng-grid,Angularjs,Angular Ui,Ng Grid,我认为我试图实现的是在ng网格中有一个类似的树。我没有找到这样的实现,但我想知道是否可以使用分组机制 我需要让组标题以与下面的行相同的方式进行编辑(参见上图),使用完全相同的可编辑单元格作为主行。更新标题组中的一个单元格时,应更新该组下的所有单元格 来自ng网格文档: aggregateTemplate的默认值: <div ng-click="row.toggleExpand()" ng-style="{'left': row.offsetleft}" class="ngAggr
ng网格
中有一个类似的树。我没有找到这样的实现,但我想知道是否可以使用分组机制
我需要让组标题以与下面的行相同的方式进行编辑(参见上图),使用完全相同的可编辑单元格作为主行。更新标题组中的一个单元格时,应更新该组下的所有单元格
来自ng网格文档:
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>
{{row.label自定义_过滤器}}({{row.totalChildren()}}{{AggItemsLabel}})
是否可以使用此选项来呈现如我所述的聚合行?下面的回答/注释与树状结构相关,与使聚合行可编辑无关
如果您正在ng网格中寻找树状结构,那么您可以通过组合使用ng If
、ng click
和API来实现这一点,API可以在单击特定行时更新ng网格数据
选项。这是一个样本
单击父行时,将调用一个切换函数,以将子行添加/删除到ng网格
数据
。(有关完整的详细信息,请参阅我的代码)
$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
};