Supprimer le tri à partir du menu de l'interface utilisateur-réseau-tête de colonne

J'ai créé l'interface utilisateur-réseau qui se compose de trois colonnes, par défaut, l'en-tête de colonne ont un " v " en forme d'icône (marqué dans le cercle rouge sur l'image) :

Supprimer le tri à partir du menu de l'interface utilisateur-réseau-tête de colonne

Ici le code et le plunker:

JS:

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;
        });
    }]);

CSS:

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

HTML:

<!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>

Dans l'image ci-dessus la grille, j'ai créé dans mon projet.

Ma question est comment puis-je supprimer le "v" signe dans la ligne d'en-tête dans le cercle rouge?

InformationsquelleAutor Michael | 2015-09-19
  1. 57

    Ce que vous voulez, c'est:

    $scope.gridOptions = {
    enableColumnMenus: false
    ...
}
    • Ce n'est pas la bonne réponse. Normalement vous avez votre columDefs défini. Ensuite, vous devez déplacer le enableColumsMenus à l'intérieur de chaque columDef. Donc la réponse ci-dessous est correct!
    • Je ne sais pas que je dirais que Ce n'est pas la bonne réponse". L'OP a demandé comment faire pour supprimer le menu les menus déroulants de tous les en-têtes, et cette réponse est correcte pour cette question. L'autre réponse fournit des informations supplémentaires sur la granularité, mais ce n'est pas pour faire de cette réponse erronée.
    InformationsquelleAutor Chris
  2. 30

    Si vous voulez le supprimer toutes les colonnes ne le suit comme suggéré par Chris:

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

    Mais si vous voulez le supprimer une ou plusieurs mais pas toutes les colonnes dont vous avez besoin

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

    Notez que la valeur par défaut de enableColumnMenus est vrai.

    • cela fonctionne bien pour moi!
    InformationsquelleAutor madan
  3. 7

    Vous pouvez désactiver la fonction de tri 

        $scope.gridOptions = {
           enableSorting: false,
           .. 
    }
    • une idée de comment puis-je supprimer un " v " signe dans la ligne d'en-tête?
    • Est-il possible que je peux enlever une entrée particulière dans la colonne de menu? Permet de dire est la colonne épinglage est activer je vais avoir des broches à gauche ou à droite dans le menu. Mais je veux cacher une colonne spécifique. Est-il une configuration pour ce
    • Pour une raison quelconque, cela a fonctionné pour moi, mais pas enableColumnMenu comme dans la plus populaire des Réponses.
    InformationsquelleAutor eran otzap
  4. 3

    J'ai réussi cela en spécifiant enableSorting: faux sur la définition de la colonne, ce qui est contraire à la documentation qui précise sortable: faux.

    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
};
    InformationsquelleAutor csharpsql