如何使用 ag-grid 加载动态列和行？答案

【问题标题】：How to load dynamic column and rows by Using ag-grid?如何使用 ag-grid 加载动态列和行？
【发布时间】：2016-06-05 08:36:08
【问题描述】：

HTML代码：

 <div class="panel-body" style="padding-bottom:0px">
     <div id="myGrid" ag-grid="gridOptions" class="ag-fresh" style="height: 100%;"></div>
</div>

角度代码：

var sqdtApp = angular.module("sqdtApp", ['ngTouch',
        'ui.grid', 'ui.grid.pagination', 'ui.grid.resizeColumns',
        'angularUtils.directives.dirPagination', 'ngAnimate', 'ui.bootstrap', 'agGrid']);
sqdtApp.controller(
                    'importedtableCtrl',
                    function ($http, $scope, $stateParams,$rootScope, $httpParamSerializer, uiGridConstants) {
                        $scope.dbtype = $stateParams.dbname;
                    $scope.columns = [];


                    $scope.gridOptions = {
                        columnDefs: [],
                        enableFilter: true,
                        rowData: [],
                        rowSelection: 'multiple',
                        rowDeselection: true
                    };
                    $scope.customColumns = [];

                    $http.post($scope.url + "/importedtablesCount", { 'dbname': $stateParams.dbname })
                                .success(
                                        function (result) {
                                            $scope.importedTableCount = result;
                                        });


                    var gridtablename = "";
                    $scope.currentImportedTableName = '';


                    $scope.loadTableInGrid = function (tablename) {
                        $scope.currentImportedTableName = tablename;
                        if (gridtablename != tablename) {
                            $scope.reset();
                            gridpageno = 1;
                            $http.post($scope.url + "/getPagingRecordImportedTable", { 'dbname': $stateParams.dbname, 'tableName': tablename, 'pageNumber': 1 }).success(
                                function (response) {
                                    $scope.names = response.records;
                                    $scope.mdata = response.metadata;
                                    //  $scope.gridOptions.data = response.records;
                                    var columnsize = 0;

                                    console.log($scope.customColumns);
                                    for (var obj in $scope.mdata) {
                                        if ($scope.mdata[obj]['columnsize'] > 20) {
                                            columnsize = 20;
                                        } else {
                                            columnsize = $scope.mdata[obj]['columnsize'];
                                        }
                                        $scope.customColumns.push({
                                            headerName: $scope.mdata[obj]['columnname'],
                                            field: $scope.mdata[obj]['columnname'],
                                            headerClass: 'grid-halign-left'

                                        });

                                        }

                                    $scope.gridOptions.columnDefs = $scope.customColumns;
                                    $scope.gridOptions.rowData = $scope.names;





                                    gridtablename = tablename;
                                    gridpageno = 1;



                                    $scope.getTotalNoOfRecordCountForGrid(tablename);
                                }).error(function (data) {
                                    alert(data);
                                });
                        } else {
                            $scope.reset();
                            $scope.resetGridTableName();
                            }
                        };
});

输出不显示行
no rows to show is output

但如果我签入$scope.gridoptions 对象，所有行和列都在那里。

$scope.gridOptions object in console with data

但它不会在页面中呈现。帮帮我。

【问题讨论】：

你能创建一个 jsfiddle 或 plnkr 吗？
比较难，因为我是从 sql server 数据库中获取数据的。

标签： javascript angularjs ag-grid

【解决方案1】：

$scope.gridOptions.columnDefs = $scope.customColumns;
$scope.gridOptions.rowData = $scope.names;

这些很可能是罪魁祸首：columnsDefs 和 rowData 仅用于在 ready 事件之前进行网格初始化。

网格初始化后，使用 gridOptions.api.setColumnDefs 和 gridOptions.api.setRowData 与网格交互

文档：https://www.ag-grid.com/angular-grid-api/index.php

【讨论】：