ng-grid自动调整列宽

Question

我正在使用AngularJS ng-grid并试图使其成为1.根据列内容自动调整列宽2.当显示较少的列时,使最后一列宽度自动调整以填充空白区域(例如说我有8列,每列有宽度:100,整个ng网格宽度是800 ...然后如果我隐藏4列,那么最后一列宽度应该自动等于500).

到目前为止,我有上面的任务1的以下代码,但遗憾的是它不起作用(列不是基于列内容自动调整大小).所以我想知道是否有人可以通过告诉我这里缺少什么来取悦帮助,以及我如何能够完成任务2.谢谢

var app = angular.module('myNGridApp', ['ngGrid']);

app.controller('myNGCtrl', function($scope) {
    $scope.myData = [{id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text", datecreated: "02/04/2014"},
                     {id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text", datecreated: "02/04/2014"},
                     {id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text", datecreated: "02/04/2014"},
                     {id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text ", datecreated: "02/04/2014"},
                     {id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text", datecreated: "02/04/2014"}];

   $scope.columnDefs= [{ field: 'id', displayName: 'ID', resizable: true, minWidth: 100, width: 'auto' },
                         { field: 'di', displayName: 'DI', resizable: true, minWidth: 100, width: 'auto' },
                         { field: 'taskstatus', displayName: 'Task Status', resizable: true, minWidth: 200, width: 'auto' },
                         { field: 'notes', displayName: 'Notes', resizable: true, minWidth: 400, width: 'auto' },
                         { field: 'datecreated', displayName: 'Date Created', resizable: true, minWidth: 200, width: 'auto' }];

      $scope.gridOptions = { 
        data: 'myData',
        columnDefs: 'columnDefs',
        footerVisible: true,
        enableColumnResize: true,
        filterOptions: {filterText: '', useExternalFilter: false},
        showColumnMenu: true,
        showFilter: true,
        plugins: [new ngGridFlexibleHeightPlugin()],
        virtualizationThreshold: 10,
    };

});

Answer 1

我也在为同样的问题而苦苦挣扎，我已经以一种适合我的要求的方式解决了，希望它可以帮助其他人！

基本上，我传入第一行数据以及包含友好列名称的可选对象。任何不在此处的名称，或者如果根本没有传递对象，都将进行驼峰命名法分割，将下划线和连字符更改为空格，并将首字母大写。

列宽计算基于等宽字体（我使用 Lucida Console），并且最长的列名或数据将用于计算宽度。

if(!datum || datum.toString().length < displayName.length)
  result.width = displayName.length * 7.5;
else
  result.width = datum.toString().length * 7.5;

if(result.width < 40)
  result.width = 40;

请参阅 Plunker：http://plnkr.co/edit/9SIF0wFYBTW9m5oaXXLb ?p=info