angularjs UI 网格 - 动态显示列

Question

我有一个存储过程，其中 returns 前 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
            },
            width: '10%', visible: true
        }

        , { field: 'Source', width: '10%', visible: true }
        , { field: 'MIC', width: '10%', 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; });

};

Answer 1

您可以在函数 loadgridVatMakeRpt 中动态创建列，例如。根据您的信息，您可以遍历列数，post 固定列集，并为每次迭代添加一个动态列，直到最后一个条目。

如果需要，还可以找到以下文档 link 以了解进一步的动态行为

请注意，列应该有它应该映射到的字段。

$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
            },
            width: '10%', visible: true
        }

        , { field: 'Source', width: '10%', visible: true }
        , { field: 'MIC', width: '10%', 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; });
};

angularjs UI 网格 - 动态显示列

angularjs UI grid - display columns dynamically

angularjs

angular-ui-grid

ui-grid