В AngularJS ui-grid, как я могу настроить сетку так, чтобы она могла автоматически регулировать ширину столбцов в соответствии с содержимым при рендеринге?
Я знаю, что есть учебник, показывающий функцию автоматического размера, но это работает только при двойном щелчке по столбцу, я бы хотел, чтобы это произошло, когда была запущена сетка.
Я не думаю, что эта функция существует на данный момент. Директива uiGridColumnResizer регистрирует прослушиватели событий на dblclick, mousedown и mouseup. Событие dblclick в основном проходит через все выделенные ячейки и вычисляет максимальную ширину и устанавливает ее как ширину столбца. Это будет проблемой производительности, если у вас много строк.
Я бы, вероятно, просто установил максимально возможную ширину, основанную на данных, которые будет иметь сетка.
Или попробуйте воспроизвести поведение в uiGridColumnResizer.
$elm.on('dblclick', function(event, args) {
event.stopPropagation();
var col = uiGridResizeColumnsService.findTargetCol($scope.col, $scope.position, rtlMultiplier);
// Don't resize if it 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 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);
});
используйте звездочку в определении столбца:
width:"*";
Для этого есть pluggin: ui-grid-auto-fit-columns
GitHub: https://github.com/Den-dp/ui-grid-auto-fit-columns
Пример: http://jsbin.com/tufazaw/edit?js,output
Применение:
<div ui-grid="gridOptions" ui-grid-auto-fit-columns></div>
angular.module('app', ['ui.grid', 'ui.grid.autoFitColumns'])
вы можете использовать * как в свойстве width, - считать auto вы можете увидеть здесь
Итак, это сработало для меня, когда мне нужно было сжать все столбцы, кроме одного. Я повторяю все столбцы после завершения загрузки сетки и запускаю событие двойного щелчка на resizer. Не самый красивый, поэтому, если у кого-нибудь еще есть лучшее решение, я был бы очень рад его услышать!
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);
}
}
Используя width: "*", настройте все столбцы в доступном порт представления, что приведет к сжатию столбцов.
Указание minWidth: "somevalue" и width: "*" делает вашу ui-сетку лучше выглядеть
добавьте следующее в gridoptions
init: function (gridCtrl, gridScope) {
gridScope.$on('ngGridEventData', function () {
$timeout(function () {
angular.forEach(gridScope.columns, function (col) {
gridCtrl.resizeOnData(col);
});
});
});
}
Убедитесь, что у каждого столбца есть ширина любого случайного числа
width: 100
Это хорошо.
Я не нашел никакой реализации для этого, так что это то, что я сделал
Итерируется через первые 10 записей.
Найден максимальный размер данных для каждого столбца.
Затем создал тег span на лету и завернул его этими данными.
Измеряли ширину тега, и это была бы ваша приблизительная ширина, необходимая для столбца (возможно, потребуется добавить некоторую более постоянную ширину из-за эффекта CSS и т.д.).
Если первые 10 записей являются null выполните один и тот же процесс, но на этот раз с заголовком столбца.
Лучшее решение, которое я могу придумать, это:
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'},
],
Я знаю, что это не будет работать в каждом случае, но в то же время большинство ваших столбцов более или менее фиксировано, а переменные, которые вы знаете заранее, - это те, которые позволяют изменять размер.
Я нашел некоторые проблемы с решением ширины. Мы должны использовать свойство cellClass в объекте ui-grid columns для включения этого класса.
.ui-grid-cell-contents-auto {
/* Old Solution */
/*min-width: max-content !important;*/
/* New Solution */
display: grid;
grid-auto-columns: max-content;
/* IE Solution */
display: -ms-grid;
-ms-grid-columns: max-content;
}
то вы должны использовать свойство cellClass в объекте столбцов ui-grid для включения этого класса в свою сетку (что-то вроде этого):
columns: [{ field: 'search_name', displayName: '', cellClass: 'ui-grid-cell-contents-auto'}]
Вы можете обратиться к подробному описанию ответа Нехалы. https://github.com/angular-ui/ui-grid/issues/3913
попробуйте использовать 'width: auto' видимому, использование этого было проблемой в предыдущем выпуске ui-grid, теперь он должен работать, часть его документов здесь: определение столбцов