Eliminar el menú de ordenación del encabezado de columna ui-grid

Question

Eliminar el menú de ordenación del encabezado de columna ui-grid

Creé ui-grid que tiene tres columnas, por defecto, el encabezado de la columna tiene un icono en forma de' v ' (marcado en círculo rojo en la imagen) :

Aquí el código y el émbolo:

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning']);


app.controller('ThirdCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
      $scope.gridOptions = {
        expandableRowTemplate: 'expandableRowTemplate.html',
        expandableRowHeight: 150,
        onRegisterApi: function (gridApi) {
            gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
                if (row.isExpanded) {
                  row.entity.subGridOptions = {
                    columnDefs: [
                    { name: 'name'},
                    { name: 'gender'},
                    { name: 'company'}
                  ]};

                  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
                    .success(function(data) {
                      row.entity.subGridOptions.data = data;
                    });
                }
            });
        }
      }

      $scope.gridOptions.columnDefs = [
        { name: 'id', pinnedLeft:true },
        { name: 'name'},
        { name: 'age'},
        { name: 'address.city'}
      ];

      $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
        .success(function(data) {
          $scope.gridOptions.data = data;
        });
    }]);

.grid {
  width: 100%;
  height: 400px;
}

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>


<div ng-controller="ThirdCtrl">
   <div ui-grid="gridOptions" ui-grid-expandable class="grid"></div>
</div>


    <script src="app.js"></script>
  </body>
</html>

En la imagen sobre la cuadrícula que he creado en mi proyecto.

Mi pregunta es ¿cómo puedo eliminar el signo "v" en la fila del encabezado en el círculo rojo?

25

angularjs angular-ui-grid

Author: arnavakhoury, 2015-09-19

Source

4 answers

Si desea eliminarlo de todas las columnas, haga lo siguiente como lo sugirió Chris:

    $scope.gridOptions = {
        enableColumnMenus: false
        ...
    }

Pero si desea eliminarlo de una o más columnas, pero no de todas, necesita

 $scope.gridOptions = {
    columnDefs: [
        {                    
            enableColumnMenu: false,
    ...
}

Tenga en cuenta que el valor predeterminado de enableColumnMenus es true.

27

Author: madan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-29 05:14:36

Puede desactivar la ordenación

    $scope.gridOptions = {
           enableSorting: false,
           .. 
    }

6

Author: eran otzap,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-19 17:55:45

Manejé esto especificando enableSorting: false en la definición de columna relevante, esto es contrario a la documentación que especificaba sortable: false.

var uiGrid = [];
var columnsUiGrid = [
    { displayName: 'Column A', field: 'model.ColumnA' },
    { displayName: 'Column B', field: 'model.ColumnB', enableSorting: false }
];

$scope.uiGridOptions = {
    enableSorting: true,
    columnDefs: columnsUiGrid,
    data: uiGrid
};

1

Author: csharpsql,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-20 12:10:04

score 53 · Accepted Answer

Lo que quieres es:

$scope.gridOptions = {
    enableColumnMenus: false
    ...
}

53

Author: Chris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-20 10:33:16