Question

我的列宽度有问题。我不知道它们预先的宽度，也不想指定每列的宽度。是否有可以使用的属性根据内容（包括列标题）自动调整所有列宽？

Answer 1

活泉！我想出了一个很酷的答案！将宽度设置为"auto"对我来说真的不起作用。也许是因为我使用ng-view？不确定。所以我创建了2个可以放在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;
}

Jasmine测试，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);
    });

});

Answer 2

使用ui-grid，必须更好：http://ui-grid.info/docs/#/tutorial/204_column_resizing

但是https://github.com/angular-ui/ng-grid/wiki/Configuration-Options

Answer 3

这有效：

app.directive('addressBasedGoogleMap', function() {
    var map
    var linkFunction = function(scope, element, attrs) {
        var googleAddress = scope.$eval(attrs.address);
        var geocoder = new google.maps.Geocoder(); 
        geocoder.geocode({ 'address': googleAddress}, function (results, status){ 
            if (status == google.maps.GeocoderStatus.OK) { 
                var mapOptions = { zoom: 16, center:results[0].geometry.location, mapTypeId:google.maps.MapTypeId.ROADMAP}
                map = new google.maps.Map(element[0], mapOptions); 
                var marker1 = new google.maps.Marker({
                       position: results[0].geometry.location,
                       map: map,
                       title: googleAddress
                     });
            }
            else{
                alert(status)
            }
        })
    };
    google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });
    google.maps.event.addListenerOnce(map, "idle", function() {
        google.maps.event.trigger(map, "resize");
    });
    return {
        link: linkFunction
    };
});

Answer 4

请参阅https://stackoverflow.com/a/32605748/1688306

上的回答

按列名称或基准计算的列宽，以较长者为准。

Answer 5

是的！在columndefs中，您可以将宽度设置为auto，这会根据数据和/或标题的宽度自动调整列的大小。

参考：Defining Columns

Answer 6

我正在使用ui-grid。以下代码对我有用。你可以试试这个。

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;
}

最后在你的html文件中添加ui-grid指令。请记住，不要忘记在网格指令中添加“ui-grid-auto-resize”。

<div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-auto-resize></div>

有没有办法自动调整ng-grid的宽度？

6 个答案:

示例用法，controllers.js：

代码，controllers.js：

Jasmine测试，controllerSpec.js：