有没有办法自动调整ng-grid中的宽度? [英] is there a way to auto adjust widths in ng-grid?
问题描述
我在列宽方面遇到麻烦.我不知道它们的宽度是多少,也不想指定每列的宽度.我是否可以使用根据内容(包括列标题)自动调整所有列宽的属性?
I'm having trouble with widths of my columns. I don't know what width they will be beforehand, nor do I want to specify each column's width. Is there an attribute that I can use that auto adjusts all the column widths based on the content (including the column header)?
推荐答案
糟糕!我想出了一个很酷的答案!将宽度设置为"auto"
确实对我不起作用.也许是因为我正在使用ng-view
吗?没有把握.因此,我创建了2个新函数,可以将它们放入controller.js
中.这样使用它们将为您提供计算出的列宽!阅读代码注释;有一些警告.
Woot! I came up with a pretty cool answer! Setting the width to "auto"
was really not working for me. Maybe it is because I'm using an ng-view
? Not sure. So I created 2 new functions you can put in your controller.js
. Using them like this will give you computed column widths! Read the code comments; there are some caveats.
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);
});
});
这篇关于有没有办法自动调整ng-grid中的宽度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!