web-dev-qa-db-fra.com

Réglage de la largeur de la colonne dans la grille d'interface utilisateur angulaire

J'utilise ui-grid angulaire et j'ai une longue grille avec près de 30 colonnes. Je veux définir une largeur fixe pour les colonnes afin qu'au moins l'en-tête de colonne soit visible facilement. Existe-t-il un moyen de définir, par exemple, une largeur de 10% pour toutes les colonnes ou de le faire pour chaque colonne une par une.

 ui-grid

Après avoir défini la largeur minimale sur la cellule en-tête-grille-ui, de nombreuses colonnes ont été combinées en une seule.

.ui-grid-header-cell {
    min-width: 150px !important;
}

 After setting min-width property

angularjsangular-uiangular-ui-grid
8
Mahtab Alam

Après avoir défini vos définitions de colonne, vous pouvez ajouter les éléments suivants:

for (var i = 0; i < $scope.gridOptions.columnDefs.length; i++) {
    $scope.gridOptions.columnDefs[i].width = '10%';
}

Cela définira toutes les colonnes à la largeur que vous sélectionnez. Avec 30 colonnes à 10%, l'utilisateur utilisera la barre de défilement horizontale pour voir toutes les colonnes, comme vous préférez. Je n'ai pas changé de CSS.

5
S. Baggy

Le meilleur moyen consiste à utiliser la propriété GridOptions minimumColumnSize:

$scope.gridOptions.minimumColumnSize = 100;

Aucun impact sur les performances et aucune bizarrerie avec les méthodes CSS.

Page de référence, Ctrl-F minimumColumnSize: http://ui-grid.info/docs/#!/api/ui.grid.class:GridOptions

2
Hanni Ali

Essayez par la fonction suivante en appelant avant la liaison de la source de données ui-grid.

 function SetColumnWidth() {
        var cols = _.filter($scope.gridOptions.columnDefs, function (c) {
            return c.visible != false;
        });
        var maxWidth = (document.documentElement.clientWidth) / cols.length;
        for (var i = 0; i < cols.length; i++) {
            cols[i].maxWidth = parseInt(maxWidth);
        }
    }

définissez la largeur de la colonne sur width: "*" et définissez minWidth comme il convient.

Cette solution convient à tous les écrans, notamment les écrans de grande résolution. Il parviendra à diviser également maxWidth de toutes les colonnes et couvrira toute la zone de l'écran.

2
Nilay Mistry

Si vous recherchez une largeur fixe, vous pouvez utiliser la propriété width dans colomnDefs comme ceci:

columnDefs : [
            { field : 'pageIcon', displayName : 'Page Icon', width : 25},
            { field : 'pageName', displayName : 'Page Name', width : 100},
            { field : 'count',    displayName : 'Count',     width : '30%'}
]
2
ArielGro

vous pouvez ajouter un style à votre css

.ui-grid-header-cell {

    min-width: 200px !important;
    max-width: 300px !important;

}
0
Piyush.kapoor

Si vous voulez ajouter de la largeur en utilisant for ou des moyens similaires, cela peut ralentir le rendu de votre grille. Je vous suggère donc de le faire via CSS. Parce que j'avais le même problème avec 15 000 lignes et 80 colonnes et que j'ai essayé d'ajouter de la largeur à l'aide d'une boucle, cela semble ralentir le rendu de la grille. Alors, essayez d'ajouter le code ci-dessous dans votre CSS, cela va résoudre votre objectif.

.ui-grid-header-cell {
 min-width: 200px !important;
 max-width: 300px !important;
}

.ui-grid-cell {
min-width: 200px !important;
max-width: 300px !important;
}
0
Madhwendar Thakur