如何使用ag-grid加載動態列和行？

HTML代碼：如何使用ag-grid加載動態列和行？

<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

但在頁面它不渲染。幫我一把。

來源

2016-02-23 Ajay Kumar Jaiswal

你能創建的jsfiddle或plnkr？ – martin

這很難，因爲我從sql server數據庫獲取數據。 –

$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

來源

2016-03-07 13:11:08 Walfrat

如何使用ag-grid加載動態列和行？

回答

相關問題