Question

此问题与Angular 4项目上的Ag-Grid行高有关。请参见以下情形：-

我有一个Ag-Gird，分别具有3列：-

编号（用户界面中可调整大小的列）
名称（用户界面中可调整大小的列）
地址（用户界面中可调整大小的列）

我确实地址列上没有任何限制（例如，字符或单词的数量限制）。用户可以输入任意数量的字符或单词。

问题：-

当地址栏的宽度完全用单词填充或用户按下 Enter 或 Shift + Enter 时，如何增加行高？
用户调整“地址”列大小时如何自动调整高度？

请帮助我解决这些问题。

谢谢

Answer 1

有很多事情要注意。

看看更新后的Stackblitz

在cellClass: "cell-wrap-text"的{{1}}列中具有ColDef属性，并具有适当的CSS
处理Address事件，以便在调整列大小时可以调用columnResized来调整行的高度
还处理this.gridApi.resetRowHeights()事件，以便在更新列的数据时，行高也会相应地更新。
```
cellEditingStopped
```
在onColumnResized() { this.gridApi.resetRowHeights(); } onCellEditingStopped() { this.onColumnResized(); }
中提供autoHeight: true属性
defaultColDef

更新：

如果要对此字段进行类似defaultColDef = { autoHeight: true };的控制，请提供cellEditor: 'agLargeTextCellEditor'。

选中此StackBlitz

Answer 2

我在反应中遇到了同样的问题，我想根据文本区域的内容增加行的高度，输入后应该转到文本区域的下一行，而不是不变成只读，所以我我是否使用过ag-grid的preventKeyboardEvent并将代码写入其中，这是我的代码

           cellClass: "description-cell",
            width: 200,
            cellRendererFramework: (params) =>{
                return <pre> {params.data.description}</pre>
            },
            cellEditor: 'agLargeTextCellEditor',
            cellEditorParams: (params) => {
                return {
                    maxLength: '1000',
                    cols: this.props.cols,
                    rows: 2
                }
            },
            suppressKeyboardEvent: (params) => {
              const KEY_ENTER = 13;
              const keyCode = params.event.keyCode;
              const gridShouldDoNothing = params.event.target.value && params.editing && keyCode === KEY_ENTER;
              params.event.target.style.height = 'inherit';
              params.event.target.style.height = `${params.event.target.scrollHeight}px`;
              params.node.setRowHeight(params.event.target.scrollHeight); // adjust it according to your requirement
              this.gridApi && this.gridApi.onRowHeightChanged();
              return gridShouldDoNothing;
          }

我希望这可以对您或正在寻找它的人有所帮助:)

AG-Grid-如何动态增加行高？

2 个答案:

更新：