Javascript ng网格自动调整列宽度大小

我正在使用AngularJS ng网格并试图使其 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,
    };

});

---

我一直在努力解决这个问题，我已经解决了我的要求，希望它能帮助别人

基本上，我传入第一行数据，以及包含友好列名的可选对象。任何不在此处的名称，或者如果根本没有传递对象，都将使用camelCase拆分、下划线和连字符替换空格，并将第一个字母大写

列宽计算基于单间距字体（我使用的是Lucida控制台），列名或基准中最长的一个将用于计算宽度

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;

if（！datum | | datum.toString（）.length

---

查看Plunker:

您是否尝试过不指定任何宽度属性？@link64是的，情况会变得更糟！列收缩得太大以至于很难读取内容我也有同样的问题。这可能会有帮助：