问题描述
我有一个存储过程,它返回前4列(LineNumber,AttributeName,Source,MIC)以及其他动态列。动态含义范围是150到1。在屏幕截图示例中,我有40到29列。
我能够将数据从后端带到控制器,并且还可以很好地显示前4列。但是我需要帮助来遍历其余的列(例如,在屏幕快照中,从40到29的列。这些列是动态的)。提前谢谢。
$scope.gridOptionsVatMakeRpt = {
enableFullRowSelection: true,enableRowHeaderSelection: false,paginationPageSizes: [20,40,60],paginationPageSize: 40,rowHeight: 53,enableFiltering: true,enableCellEdit: false,enableGridMenu: false,rowTemplate:
'<div ng-class="{ \'grey\':grid.appScope.rowFormatter( row ) }">' +
' <div ng-repeat="(colRenderIndex,col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>' +
'</div>',columnDefs: [
{
field: 'LineNumber',grouping: {
groupPriority: 0
},width: '10%',visible: true
},{
field: 'AttributeName',grouping: {
groupPriority: 1
},{ field: 'Source',visible: true },{ field: 'MIC',visible: true }
}
$scope.loadgridVatMakeRpt = function () {
$scope.loading = true;
console.log('loading grid');
LRWService.getVatMakeRpt('1','1221209','100000028','2020-05-08','2020-05-08').success(function (data) {
if (data === null || data.VatMakeRptList === null || data.VatMakeRptList.length === 0) {
$scope.error = true;
$scope.errorDescription = "No data found for selected criteria.";
} else {
$scope.gridOptionsVatMakeRpt.paginationPageSizes.push(
data.VatMakeRptList.length
);
var VatMakeRptList = data.VatMakeRptList;
$scope.gridOptionsVatMakeRpt.data = VatMakeRptList;
$scope.renderfields();
console.log(VatMakeRptList);
$scope.error = false;
}
}).finally(function () { $scope.loading = false; });
};
解决方法
您可以在例如loadgridVatMakeRpt函数内部动态创建列。根据您的信息,您可以迭代列数,发布固定的列集,并为每次迭代添加一个动态列,直到最后一个条目。
如果需要,还可以在下面的文档链接中找到更多动态行为
请注意,列应具有应映射到的字段。
$scope.gridOptionsVatMakeRpt = {
enableFullRowSelection: true,enableRowHeaderSelection: false,paginationPageSizes: [20,40,60],paginationPageSize: 40,rowHeight: 53,enableFiltering: true,enableCellEdit: false,enableGridMenu: false,rowTemplate:
'<div ng-class="{ \'grey\':grid.appScope.rowFormatter( row ) }">' +
' <div ng-repeat="(colRenderIndex,col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>' +
'</div>',columnDefs: [
{
field: 'LineNumber',grouping: {
groupPriority: 0
},width: '10%',visible: true
},{
field: 'AttributeName',grouping: {
groupPriority: 1
},{ field: 'Source',visible: true },{ field: 'MIC',visible: true }
}
$scope.loadgridVatMakeRpt = function () {
$scope.loading = true;
console.log('loading grid');
LRWService.getVatMakeRpt('1','1221209','100000028','2020-05-08','2020-05-08').success(function (data) {
if (data === null || data.VatMakeRptList === null || data.VatMakeRptList.length === 0) {
$scope.error = true;
$scope.errorDescription = "No data found for selected criteria.";
} else {
$scope.gridOptionsVatMakeRpt.paginationPageSizes.push(
data.VatMakeRptList.length
);
var VatMakeRptList = data.VatMakeRptList;
var keysArray = [];
keysArray = Object.keys(VatMakeRptList[0]);
for (var i = 4;i<keysArray.length;i++) {
$scope.gridOptionsVatMakeRpt.columnDefs.push({ name: keysArray[i],field: keysArray[i],width: <dynamic/fixed width>,visible: true});
}
$scope.gridOptionsVatMakeRpt.data = VatMakeRptList;
$scope.renderfields();
console.log(VatMakeRptList);
$scope.error = false;
}
}).finally(function () { $scope.loading = false; });
};