У меня возникают проблемы с шириной столбцов. Я не знаю, какую ширину они будут заблаговременно, и я не хочу указывать ширину каждого столбца. Есть ли атрибут, который я могу использовать, который автоматически настраивает все ширины столбцов на основе содержимого (включая заголовок столбца)?
Есть ли способ автоматической регулировки ширины в ng-сетке?
Ответ 1
Woot! Я придумал довольно крутой ответ! Установка ширины на "auto"
действительно не работала для меня. Может быть, это потому, что я использую ng-view
? Не уверен. Поэтому я создал две новые функции, которые вы можете поместить в свой controller.js
. Используя их так, вы получите вычисленную ширину столбцов! Прочитайте комментарии к коду; есть некоторые оговорки.
Пример использования, controllers.js:
var colDefs = makeColDefs(rows[0]);
colDefs = autoColWidth(colDefs, rows[0]);
$scope.phones = rows;
$scope.gridOptions = {
data : 'phones',
showFilter : true,
enableColumnResize : true,
columnDefs : colDefs
};
Код, controllers.js:
/**
* Create a colDefs array for use with ng-grid "gridOptions". Pass in an object
* which is a single row of your data!
*/
function makeColDefs(row) {
var colDefs = [];
for ( var colName in row) {
colDefs.push({
'field' : colName
});
}
return colDefs;
}
/**
* Return a colDefs array for use with ng-grid "gridOptions". Work around for
* "auto" width not working in ng-grid. colDefs array will have percentage
* widths added. Pass in an object which is a single row of your data! This
* function does not do typeface width! Use a fixed width font. Pass in an
* existing colDefs array and widths will be added!
*/
function autoColWidth(colDefs, row) {
var totalChars = 0;
for ( var colName in row) {
// Convert numbers to strings here so length will work.
totalChars += (new String(row[colName])).length;
}
colDefs.forEach(function(colDef) {
var numChars = (new String(row[colDef.field])).length;
colDef.width = (numChars / totalChars * 100) + "%";
});
return colDefs;
}
Тест на жасмин, controllerSpec.js:
'use strict';
var ROW = {
'col1' : 'a',
'col2' : 2,
'col3' : 'cat'
};
var COLUMN_DEF = [ {
field : 'col1'
}, {
field : 'col2'
}, {
field : 'col3'
} ];
var COLUMN_DEF2 = [ {
field : 'col1',
width : '20%'
}, {
field : 'col2',
width : '20%'
}, {
field : 'col3',
width : '60%'
} ];
/* jasmine specs for controllers go here */
describe('controllers', function() {
beforeEach(module('myApp.controllers'));
it('should make an ng-grid columnDef array from a row of data.',
function() {
expect(makeColDefs(ROW)).toEqual(COLUMN_DEF);
});
it('should return an ng-grid columnDef array with widths!', function() {
var colDefs = makeColDefs(ROW);
expect(autoColWidth(colDefs, ROW)).toEqual(COLUMN_DEF2);
});
});
Ответ 2
Использовать ui-grid, нужно лучше: http://ui-grid.info/docs/#/tutorial/204_column_resizing
но https://github.com/angular-ui/ng-grid/wiki/Configuration-Options
Ответ 3
Это работает:
$scope.gridOptions = {
init: function (gridCtrl, gridScope) {
gridScope.$on('ngGridEventData', function () {
$timeout(function () {
angular.forEach(gridScope.columns, function (col) {
gridCtrl.resizeOnData(col);
});
});
});
},
data: 'scopeDataField',
columnDefs: [
{
field: 'property1',
displayName: 'property1title',
width: '100px' // a random fixed size, doesn't work without this
},
{
field: 'property2',
displayName: 'property2title',
width: '100px'
}
],
enableColumnResize : true
};
Ответ 4
См. ответ на fooobar.com/questions/227393/...
Ширина столбца, вычисленная по имени столбца или базовой точке, в зависимости от того, что больше.
Ответ 5
Да! В columndefs
вы можете установить ширину в auto
, и это будет автоматически определять столбцы на основе ширины данных и/или заголовка.
Ссылка: Определение столбцов
Ответ 6
Я использую ui-сетку. Следующий код работает для меня. Вы можете попробовать это.
First you need to add a module dependency 'ui.grid.autoResize' in your main module.
Then add css class something like this
.grid {
width : 400px !important;
max-width : 400px !important;
height : 600px !important;
}
И, наконец, добавьте директиву ui-grid в ваш html файл, как это. Имейте в виду, не забывайте добавлять 'ui-grid-auto-resize
' в директиве grid.
<div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-auto-resize></div>