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

我正在努力解决同样的问题，而且我已经以符合我要求的方式解决了，希望它可以帮助别人！

基本上我传入第一行数据，以及包含友好列名的可选对象。任何不在此处的名称，或者根本没有传递对象的名称，将为空格更改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;

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

ng-grid自动调整列宽

1 个答案: