Angular 2 个 NG 网格流体柱

Question

是否有可能有一个网格，其中列的宽度不是明确基于像素的？这在与 sizeColumnsToFit().

结合使用时特别有用

例如，在下面的 table 中，视觉设计可能要求 ID 和名称字段刚好适合内容，然后让描述填充包含元素的其余宽度。

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

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

Answer 1

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

width: this.columnWidth(windowWidth, 10)

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

Answer 2

尽管在我的建议中您仍然需要提供宽度，但它确实允许容纳更大 "dynamic" 的宽度。

首先，为您想要的列设置宽度 smaller/fixed:

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

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

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

Angular 2 个 NG 网格流体柱

Angular 2 NG Grid Fluid Columns

ag-grid

angular