ui-grid Datenanzeige Problem

Question

Ich verwende UI-Grid mit meiner Cordova-Anwendung.

Jede Hilfe: Wenn ich versuche, die ui-Raster zu füllen, werden manchmal Daten wie unten im Bild auf der linken Seite angezeigt?

HTML

<div ui-grid="{data: gridOptions, columnDefs: gridColumns, paginationPageSize: 10, enableColumnMenus: false, enableHorizontalScrollbar : 0, 
       enableVerticalScrollbar : 0}" ui-grid-auto-resize ui-grid-pagination class="grid_transmiss"> </div> 

JS

$scope.gridColumns = [{ 
     field: 'ref', 
     displayName: 'Référence' 
     }, { 
     field: 'Emq', 
     displayName: 'Nombre de plots empilés' 
     }, { 
     field: 'charge', 
     displayName: 'Charge nominale (daN)' 

     }, { 
     field: 'fp', 
     displayName: 'Fréquence propre(Hz)' 
     }, { 
     field: 'attenuation', 
     displayName: 'Atténuation(%)' 
     }, { 
     field: 'flechereel', 
     displayName: 'Flèche réelle statique (mm)' 
     }, { 
     name: 'Courbe', 
     displayName: 'Courbe', 
     cellTemplate: '<i ng-click="grid.appScope.goToChart()"><img src="img/chart.png" style="width=20px;height:20px" alt="Voir courbe" /></i>' 
     }]; 

Answer 1

Versuchen Sie Raster in Ihrem Controller wie folgt definieren:

$scope.gridOptions = { 
    columnDefs: [ 
     { 
      field: 'ref', displayName: 'Référence', width: "*" 
     }, 
     { 
      field: 'Emq', displayName: 'Nombre de plots empilés', width: "*" 
     }, 
     { 
      field: 'charge', width: 110, displayName: 'Charge nominale (daN)' 
     }, 
     { field: 'fp', displayName: 'Fréquence propre(Hz)', width: "*" 
     }, 
     { 
      field: 'attenuation', displayName: 'Atténuation(%)', width: "*" 

     }, 
     { 
      field: 'flechereel', displayName: 'Flèche réelle statique (mm', width: "*" 


     }, 
     { 
      field: 'Courbe', displayName: 'Release Courbe', width: "*", 
      cellTemplate: '<i ng-click="grid.appScope.goToChart()"><img src="img/chart.png" style="width=20px;height:20px" alt="Voir courbe" /></i>' 
     }, 
     ], 
     showGridFooter: true, 
     enableFiltering: true, 
     enableSorting: false, 
     enableColumnMenus: false, 
     paginationPageSizes: [100, 120, 140], 
     paginationPageSize: 100, 
     enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER, 
     enableGridMenu: false, 
     onRegisterApi: function (gridApi) { 
      $scope.gridApi = gridApi; 

     } 
}; 

Dann in Ihrem HTML:

  <div ui-grid="gridOptions" class="grid" ui-grid-pagination ui-grid-exporter ui-grid-auto-resize></div> 

Also, stellen Sie sicher, dass Sie sich wie so 'uiGridConstants' in unserer Controller-Definition enthalten:

ContractorCtrl.$inject = ['$scope', '$interval', '$window', '$filter', 'uiGridConstants', '$q', '$timeout']; 
function ContractorCtrl($scope, $interval, $window, $filter, uiGridConstants, $q, $timeout) 

Lassen Sie mich wissen, ob dies Ihr Problem löst.