Comment dimensionner automatiquement la largeur de colonne dans l'interface utilisateur AngularJS

Je ne pense pas que cette fonction existe sur ce point. Le uiGridColumnResizer directive est en cours d'enregistrement des écouteurs d'événement sur dblclick, mousedown et mouseup. L'événement dblclick est fondamentalement en passant par toutes les cellules rendus et le calcul du maximum de la largeur et de la définir comme la largeur de la colonne. Ce sera un problème de performances si vous avez beaucoup de lignes rendus.

Je serais probablement juste de définir une largeur maximum sur la base des données de la grille.

Ou d'essayer de reproduire le comportement de la uiGridColumnResizer.

 $elm.on('dblclick', function(event, args) {
event.stopPropagation();
var col = uiGridResizeColumnsService.findTargetCol($scope.col, $scope.position, rtlMultiplier);
//Don't resize if it's disabled on this column
if (col.colDef.enableColumnResizing === false) {
return;
}
//Go through the rendered rows and find out the max size for the data in this column
var maxWidth = 0;
var xDiff = 0;
//Get the parent render container element
var renderContainerElm = gridUtil.closestElm($elm, '.ui-grid-render-container');
//Get the cell contents so we measure correctly. For the header cell we have to account for the sort icon and the menu buttons, if present
var cells = renderContainerElm.querySelectorAll('.' + uiGridConstants.COL_CLASS_PREFIX + col.uid + ' .ui-grid-cell-contents');
Array.prototype.forEach.call(cells, function (cell) {
//Get the cell width
//gridUtil.logDebug('width', gridUtil.elementWidth(cell));
//Account for the menu button if it exists
var menuButton;
if (angular.element(cell).parent().hasClass('ui-grid-header-cell')) {
menuButton = angular.element(cell).parent()[0].querySelectorAll('.ui-grid-column-menu-button');
}
gridUtil.fakeElement(cell, {}, function(newElm) {
//Make the element float since it's a div and can expand to fill its container
var e = angular.element(newElm);
e.attr('style', 'float: left');
var width = gridUtil.elementWidth(e);
if (menuButton) {
var menuButtonWidth = gridUtil.elementWidth(menuButton);
width = width + menuButtonWidth;
}
if (width > maxWidth) {
maxWidth = width;
xDiff = maxWidth - width;
}
});
});
//check we're not outside the allowable bounds for this column
col.width = constrainWidth(col, maxWidth);
//All other columns because fixed to their drawn width, if they aren't already
resizeAroundColumn(col);
buildColumnsAndRefresh(xDiff);
uiGridResizeColumnsService.fireColumnSizeChanged(uiGridCtrl.grid, col.colDef, xDiff);
});

Il y a un pluggin qui ne ce: ui-grille-ajustement automatique des colonnes

GitHub: https://github.com/Den-dp/ui-grid-auto-fit-columns

Exemple: http://jsbin.com/tufazaw/edit?js,sortie

Utilisation:

<div ui-grid="gridOptions" ui-grid-auto-fit-columns></div>
angular.module('app', ['ui.grid', 'ui.grid.autoFitColumns'])

Donc, cela a fonctionné pour moi quand j'en avais besoin pour réduire toutes les colonnes sauf pour un. Je itérer sur toutes les colonnes après la grille est fini de charger, et de déclencher un événement de clic double sur le resizer. Pas la plus jolie, donc, si quelqu'un d'autre a une meilleure solution, je serais très heureux de l'entendre!

function resizeColumn(uid) {
//document.querySelector might not be supported; if you have jQuery
//in your project, it might be wise to use that for selecting this
//element instead
var resizer = document.querySelector('.ui-grid-col' + uid + ' .ui-grid-column-resizer.right');
angular.element(resizer).triggerHandler('dblclick');
}
var gridOptions = {
...
onRegisterApi: function (gridApi) {
//why $interval instead of $timeout? beats me, I'm not smart enough
//to figure out why, but $timeout repeated infinitely for me
$interval(function() {
var columns = gridApi.grid.columns;
for(var i = 0; i < columns.length; i++) {
//your conditional here
if(columns[i].field !== 'name') {
resizeColumn(columns[i].uid)
}
}
}, 0, 1);
}
}

ajouter le texte suivant à la gridoptions

                    init: function (gridCtrl, gridScope) {
gridScope.$on('ngGridEventData', function () {
$timeout(function () {
angular.forEach(gridScope.columns, function (col) {
gridCtrl.resizeOnData(col);
});
});
});
}

Assurez-vous d'avoir une largeur de nombre aléatoire sur chaque colonne définition

width: 100 

est fine.

Meilleure solution je peux trouver est:

1. définir la largeur de la grille à 100%
2. définir la maxWidth: l'attribut sur la columnDefs vous ne voulez pas à la taille du petit nombre
3. laisser la taille de la grille elle-même

html:

ui-grid="gridOptions" class="myuigrid" ui-ui-grid-resize-columns ui-grid-ui-grid-auto-resize></div>

css:

.myuigrid {
width: 100%;
}

js

            columnDefs: [
{ name: 'Id', maxWidth:80 },
{ name: 'Name', maxWidth: 280 },
{ name: 'LongName'},
],

Je sais que cela ne peut pas fonctionner dans tous les cas, mais la plupart du temps, la plupart de vos colonnes sont plus ou moins fixe et la partie variable de ceux qui vous savez à l'avance sont ceux à laisser redimensionner.

essayez d'utiliser 'width: auto' ..apparemment à l'aide de cette question dans une précédente version de ui-gridil devrait fonctionner maintenant, il fait partie de ses docs ici: définition des colonnes

EDIT: référence lien vers fermé le numéro 565 page