ng-grid自动调整列宽

I am using AngularJS ng-grid and trying to make it 1. Auto-size column width based on the column content 2. When less columns are displayed, to make last column width auto-size to fill the empty area (For example say I have 8 columns each with width : 100 and the whole ng-grid width is 800...then if I hide 4 columns, then last column width should automatically be equal to 500).

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

So far I have the following code for task 1 above but unfortunately it is not working (columns are not auto-sized based on column content). So I was wondering if anyone can please help by telling me what I am missing here, and how I can do task 2. Thanks

到目前为止,我有上面的任务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,
    };

});

1 个解决方案

#1

I was struggling with this same issue, and I've solved in a way which worked for my requirements, hope it can help someone else!

我正在努力解决同样的问题,我已经解决了一个符合我要求的方式,希望它可以帮助别人!

Basically I pass in the first row of data, along with an optional object containing friendly column names. Any names not in here, or if the object is not passed at all, will have camelCase split, underscores and hyphens changed for spaces, and first letter capitalised.

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

Column width calculation is based on a monospaced font (I used Lucida Console), and the longest of the column name, or the datum, will be used to calculate the width.

列宽计算基于等宽字体(我使用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;

See the Plunker: http://plnkr.co/edit/9SIF0wFYBTW9m5oaXXLb?p=info

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

#1