Comment faire pour masquer la colonne dans la grille ng

voici mon code:

index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng- grid/css/ng-grid.css" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
  <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MyCtrl">
    <div class="gridStyle" ng-grid="gridOptions"></div>
    <div class="selectedItems">Selected ID:{{mySelections[0].id}}</div><br><br>

</body>

</html>

app.js

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
  $scope.mySelections = [];
  $scope.myData = [{empno: 111, name: "Moroni", id: 1},
                   {empno: 222, name: "Tiancum", id: 2},
                   {empno: 333, name: "Jacob", id: 3},
                   {empno: 444, name: "Nephi", id: 4},
                   {empno: 555, name: "Akon", id: 5},
                   {empno: 666, name: "Enos", id: 6}];
  $scope.gridOptions = { 
    data: 'myData',
    selectedItems: $scope.mySelections,
    multiSelect: false
  };
});

Q1: je veux cacher la colonne id en ng-grille.
Q2: Après avoir caché la colonne id, puis-je obtenir la valeur de l'id lorsque je sélectionne un certain nombre de lignes?
Comment pouvez modifier le code?

Entendre, c'est la plunk: Plunk démo

InformationsquelleAutor Tom Cheng | 2013-06-06
  1. 18

    Juste ajouter ci-dessous les lignes de configuration et il va travailler

     columnDefs: [
            {field: 'empno', displayName: 'empno'},
            {field:'name', displayName:'name'}
        ]
    • Merci pour votre réponse
    • pls accepter la réponse si ça fonctionne 🙂
    • Salut Ajay. Si nous voulons montrer deux colonnes sous un displayName comment pouvons-nous faire? Je veux montrer Prénom+Nom dans une colonne appelée Nom. J'ai essayé columnDefs: [ { field: 'FirstName'+'LastName', displayName: "Nom"}, ]. Mais pas de travail. S'il vous plaît aider
    • Salut @Ajay. si l'on se multiSelect: faux, de sorte que l'utilisateur peut cliquer sur une ligne, Comment obtenir de la ligne sélectionnée? est-il bien comme selectedRow ou selectedItem au lieu de selectedItems?? parce que si nous utilisons selectedItems pour multiSelect:false, notre ligne sélectionnée sera ajoutée dans $champ d'application.mySelections tableau et si nous voulons accéder à cet élément, nous devons écrire $champ d'application.mySelections[0].nom de.. Comment le résoudre ?
    • Si vous ne connaissez pas la colonne visible des définitions, mais vous ne savez quelles colonnes vous sera caché, comment il faut faire dans ce cas??
    InformationsquelleAutor Ajay Beniwal
  2. 26

    Vous pouvez définir visible: false droit dans la définition de la colonne:

    $scope.gridOptions = { 
    data: 'myData',
    selectedItems: $scope.mySelections,
    multiSelect: false,
    columnDefs: [
        {field: 'empno', displayName: 'empno', visible:false},
        {field:'name', displayName:'name'}
    ]
};
    • Comment puis-je masquer la colonne de sélecteur de colonnes aussi. Si j'ai mis " visibles:false,' colonne va se cacher à partir de la grille a pas de sélecteur de colonnes, est-il un moyen pour y parvenir
    • Vous devez modifier le code de la ng-grille-modèle de menu ou d'injecter votre propre modèle personnalisé au moment de l'exécution. Là, vous avez le contrôle sur les colonnes qui sont affichées dans le menu.
    • Alternativement, vous pouvez ajouter et supprimer des colonnes dans les colonnes de la collection au lieu d'utiliser le visible réglage.
    InformationsquelleAutor Wayne Bloss
  3. 20

    Vous pouvez également masquer la colonne de manière dynamique par l'ajout de ce code après la définition de la grille;

        var pos = $scope.gridOptions.columnDefs.map(function (e) { return e.field; }).indexOf('yourFieldName');
    if ($scope.basicAdmin || $scope.superAdmin)
        $scope.gridOptions.columnDefs[pos].visible = true;
    else
        $scope.gridOptions.columnDefs[pos].visible = false;

    La angularjs grid array est $champ d'application.gridOptions.columnDefs. Modifier la gridOptions le nom de votre grille.

    Remplacer "yourFieldName" avec n'importe quel domaine que vous souhaitez masquer. Ensuite, mettez ce que vous voulez tester.

    Cela a pris un certain temps à comprendre. J'espère que cela pourra en sauver d'autres un certain temps.

    • Grâce user3219752, il m'a aidé à résoudre mon problème.
    • Pour faire ce travail avec l'interface utilisateur de la grille v3.2.9 - 2016-09-21, j'ai eu à faire l'appel suivant après le changement de la colonne de propriétés de visibilité: ce.gridApi.de la grille.refresh();
    InformationsquelleAutor Doug Weems
  4. 8

    À masquer la colonne particulière dans AngularJS de l'INTERFACE utilisateur de la grille, nous pouvons utiliser visible: faux propriété, comme indiqué ci-dessous.

    columnDefs: [
{ field: 'userid', visible: false, displayName: 'UserId' },
{ field: 'username', displayName: 'UserName' },
{ field: 'branch', displayName: 'Education' }
]

    Si vous voulez le vérifier dans l'exemple complet, vous devez écrire le code comme indiqué ci-dessous

    <html ng-app="myApp">
<head>
<title>Hide Particular Column in Angularjs UI Grid with Example</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 210px
}
</style>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.mySelections = [];
$scope.myData = [{ userid: 1, username: "Anil Singh", branch:"B.tech" },
{ userid: 2, username: "Sunil", branch: "Msc" },
{ userid: 3, username: "Sushil", branch: "B.Tech" },
{ userid: 4, username: "Dilip", branch: "MBA" },
{ userid: 5, username: "Upendra", branch: "MD" },
{ userid: 6, username: "Reena", branch: "CA"}];
$scope.gridOptions = {
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: false,
columnDefs: [
{ field: 'userid', visible: false, displayName: 'UserId' },
{ field: 'username', displayName: 'UserName' },
{ field: 'branch', displayName: 'Education' } ]
};
});
</script>
</body>
</html>
    • il semble que ce soit la réponse correcte. la question était de masquer la colonne.
    • Comment puis-je masquer la colonne de sélecteur de colonnes aussi.
    • la largeur de la colonne sélecteur du panneau est modifié à l'aide de la columnChooser. Essayez comme, <div style="height:390px; max-width:630px; margin: 0 auto" dx-data-grid="{ source de données: des livres, des colonnes: [ 'auteur', 'titre', 'année', 'genre', 'format', { dataField: "prix", visible: false }, { dataField: "longueur", visible: false } ], pagination: { pageSize: 7 }, columnChooser: { enabled: true, largeur: 400 } }"></div>
    InformationsquelleAutor Anil Singh
  5. 3

    On peut utiliser le code suivant à la suite de définir la grille

     if ($rootScope.CanDelete == false && $rootScope.CanEdit == false)
$scope.ConfigItemGrid.columnDefs[4].visible = false;
else
$scope.ConfigItemGrid.columnDefs[4].visible = true;
    • Oui, cela fonctionne absolument, Merci Nazrul
    InformationsquelleAutor Md. Nazrul Islam
  6. 3

    Utilisation "hide: true" attribut comme ci-dessous dans Angulaire 2, fonctionne très bien pour moi:

    columnDefs = [
{ headerName: "Make", hide: true, field: "make", editable: true, filter: 'text'},
{ headerName: "Model", field: "model", filter: 'text'},
{
headerName: "Price",
field: "price",
filter: 'number',
cellClass: 'rightJustify',
cellRenderer: function (params: any) {
return '$' + params.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //thanks http://stackoverflow.com/users/28324/elias-zamaria
}
}
];
    • cacher ne fait aucune différence pour moi. visible:false ne. headerName est également ignoré, displayName œuvres. angulaire v 1.5.3 ici.
    InformationsquelleAutor Chris Xu
  7. 0

    Je vous suggère d'ajouter "visibles: false' pour les définitions de colonnes. Si vous choisissez de ne pas le spécifier dans columnDefs, lorsque vous validez la ligne arrière à ce que votre backend, vous pouvez null hors champ. C'est ce que j'ai vécu.

    InformationsquelleAutor Brian