angularjs UI网格-动态显示列

如何解决angularjs UI网格-动态显示列

我有一个存储过程，它返回前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; });
};