ng-grid 自动调整列宽答案

【问题标题】：ng-grid auto sizing columns widthng-grid 自动调整列宽
【发布时间】：2014-04-05 08:45:27
【问题描述】：

我正在使用 AngularJS ng-grid 并尝试制作它 1.根据列内容自动调整列宽 2.当显示较少的列时，使最后一列宽度自动调整大小以填充空白区域（例如，我有 8 列，每列宽度：100，整个 ng-grid 宽度为 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,
    };

});

【问题讨论】：

你试过不指定任何宽度属性吗？
@link64 是的，而且情况会变得更糟！列缩小到难以阅读内容的程度
我也有同样的问题。
这可能会有所帮助：stackoverflow.com/questions/17174096/…

标签： javascript angularjs

【解决方案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

【讨论】：