Question

我在我的Cordova应用程序中使用ui-grid。当我尝试填充ui-grid时，有时数据会显示在左侧，如下图所示：

任何帮助？

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

尝试在控制器中定义网格，如下所示：

-webkit-transition: all 0.5s ease-out;  /* Saf3.2+, Chrome all these text should be comment*/
     -moz-transition: all 0.5s ease-out; /*  FF4+ */
      -ms-transition: all 0.5s ease-out; /*  IE10 */
       -o-transition: all 0.5s ease-out; /*  Opera 10.5+ */
          transition: all 0.5s ease-out;

然后在你的HTML中：

$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;

        }
};

另外，请确保在我们的控制器定义中包含'uiGridConstants'，如下所示：

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

如果这可以解决您的问题，请告诉我。

Answer 2

根据以下格式更改列定义。它会起作用。

$scope.gridOptions = {
                    columnDefs: [
                        {name:'clumnName', fields: 'DisplayValue', width: '20%'},
                        {name:'clumnName', fields: 'DisplayValue', width: '20%'},
                        {name:'clumnName', fields: 'DisplayValue', width: '20%'},

                    ],


                    data: $scope.DisplayDataSet,
                }

ui-grid数据显示问题

2 个答案: