如何在Angular UI网格中自动调整最后一列的大小

Question

我已经定义了列定义如下：

$scope.gridOptions = {
enableColumnResizing: true,
    columnDefs : [
        {displayName : "Name", field : "name", width : '200'}, 
        {displayName : "Gender", field : "gender" , width:'300'},
        {displayName :"Address",field:"address",width:'400'}
    ]
};

期望是，如果我调整了列大小，则最后一列应调整为网格的剩余宽度。

Answer 1

By removing last column width or setting last column width to '*' will resolve the issue.
But the whitespace problem arises if we resize the last column. 
So to avoid whitespace problem you have to approaches:
1)You have to disable resizing on the last column 
$scope.gridOptions = {
enableColumnResizing: true,
    columnDefs : [
        {displayName : "Name", field : "name", width : '200'}, 
        {displayName : "Gender", field : "gender" , width:'300'},
        {displayName :"Address",field:"address",width:'*',enableColumnResizing:false}
    ]
};
Or
2) set the width of the previous column to '*' dynamically.

$scope.gridOptions = {
enableColumnResizing: true,
    columnDefs : [
        {displayName : "Name", field : "name", width : '200'}, 
        {displayName : "Gender", field : "gender" , width:'300'},
        {displayName :"Address",field:"address",width:'*'}
    ]
};
If you want to resize the last column set the width of "gender" column to '*' using some JS snippet.