2

这个问题与 Angular 4 Project 上的 Ag-Grid 行高有关。请看以下场景：-

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

  1. Id（来自 UI 的可调整大小的列）
  2. 名称（来自 UI 的可调整大小的列）
  3. 地址（来自 UI 的可调整大小的列）

我在地址列上没有任何限制（例如允许的字符或单词数量有限） 。用户可以键入他们想要的任意数量的字符或单词。

问题：-

  1. 当地址列宽完全被单词填满或用户按Enter或Shift + Enter时，如何增加行高？
  2. 当用户调整地址列的大小时如何自动调整高度？

请帮我解决这些问题。

谢谢

4

2 回答 2

1

有很多事情需要注意。

看看更新的Stackblitz

  1. cellClass: "cell-wrap-text"在ColDeffor列中具有属性Address并具有适当的 CSS
  2. 处理columnResized事件，以便this.gridApi.resetRowHeights()在调整列大小时调用该事件来调整行的高度

  3. 还要处理cellEditingStopped事件，以便当列的数据更新时，行高也会相应地更新。 

    onColumnResized() {
   this.gridApi.resetRowHeights();
}
onCellEditingStopped() {
  this.onColumnResized();
}

  4. 提供autoHeight: true财产在defaultColDef

    defaultColDef = { autoHeight: true };

更新：

cellEditor: 'agLargeTextCellEditor'如果您想textarea对该字段进行类似控制，请提供。

检查这个StackBlitz

于 2019-03-21T09:24:28.933 回答
1

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

           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;
          }

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

于 2020-04-11T14:01:46.143 回答