Angular 2 NG Grid 流体柱答案

【问题标题】：Angular 2 NG Grid Fluid ColumnsAngular 2 NG Grid 流体柱
【发布时间】：2017-02-24 04:01:32
【问题描述】：

是否有可能有一个网格，其中列的宽度不是基于像素的？这在与sizeColumnsToFit() 结合使用时特别有用。

例如，在下表中，视觉设计可能要求 ID 和 Name 字段恰好适合内容，然后让 Description 填充包含元素的其余宽度。

| ID | Name  | Description    |
|----|-------|----------------|
| 1  | Foo   | Something foo  |
| 2  | Bar   | Something bar  |

目前，使用sizeColumnsToFit() 使它们的宽度都相同（所以是tableWidth / 3 之类的东西）。

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

您可以在列定义中使用网格的宽度属性并将其绑定到可以返回百分比宽度的函数。

width: this.columnWidth(windowWidth, 10)

private columnWidth(windowWidth:number, columnSize:number) {
    return Math.floor((windowWidth * columnSize) / 100);
}

【讨论】：

【解决方案2】：

虽然您仍然需要在我的建议中提供宽度，但它确实允许容纳更“动态”的宽度。

首先，为您想要更小/固定的列设置宽度：

var columnDefs = [
    {
        headerName: "Column 1",
        field: "col1",
        width:20
    },

gridReady 事件的钩子以调整剩余列的大小（不会设置宽度）：

$scope.gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    onGridReady: () => {
        $scope.gridOptions.api.sizeColumnsToFit();
    }
    ...other properties

【讨论】：