Question

我正在使用带有react 16.12.0的ag-grid。

我有此列定义：

   const columnsAuszeichnungenn = [{
        headerName: "Award",
        field: "auszeichnungsname",
        resizable: true,
        sortingOrder: ['asc']
    }, {
        headerName: "From",
        field: "von",
        resizable: true,
        editable: true,
        cellEditorFramework: CellEditorOnlyNumbers,
        onCellValueChanged: (params: any) => {
            //Check if the user has changed the value
            if (params.oldValue !== params.newValue) {
                doSomething(params.newValue, "von", params.data);
            }
        },
        cellStyle: {'white-space': 'normal'},
    }];

CellEditorOnlyNumbers：

const CellEditorOnlyNumbers: React.FC<Props> = (props, ref) => {

    const [error, setError] = useState<boolean>(false);
    const [value, setValue] = useState<string>(props.value);

    function onBlurcheckInput(e: any): void {
        const value = e.currentTarget.value.trim();
        /*Zuerst überprüfen wir, ob wir vlt nicht nur in das Textfeld hinein geklickt
        haben und ohne etwas zu machen wieder raus gegangen sind, deshalb erste if*/
        if (value !== props.value && !error) {
            props.api.stopEditing();
        }
    }

    function onchangeCheck(e: any): void {
        const value = e.currentTarget.value.trim();
        let isError = false;
        if (value === "" || isNaN(value)) {
            //Es ist keine Zahl -> Fehler
            isError = true;
        }

        setValue(value);
        setError(isError);
    }


    useImperativeHandle(ref, () => {
        return {
            getValue: () => {
                if (error) {
                    //return initial value
                    return props.value;
                } else {
                    return parseInt(value);
                }
            }
        };
    });

    return (
        <>
            <FormControl
                error={error}>
                <Input
                    onBlur={onBlurcheckInput}
                    onChange={(e: any) => onchangeCheck(e)}
                    value={value}
                    type="number"
                />
            </FormControl>
        </>
    );
};

export default forwardRef(CellEditorOnlyNumbers);

我有以下行为：

单元格的大小不正确。我想使单元格编辑器的高度与父行相同。可悲的是，我不知道从哪里开始。有人可以给我看一个可行的例子或向我指出正确的方向吗？

//编辑在这里找到了覆盖CSS的解决方案： Change cell height

Answer 1

像这样更改编辑器的输入样式：

将此添加到您的CSS中，您的CSS必须是代码中的最后一个CSS。这取决于您的ag-grid主题，此示例与ag-theme-balham主题类一起使用，然后，如果要更改主题，则必须更改此行：

.ag-theme-balham .ag-cell-inline-editing {
  height: 100%;
}

然后使用此：

<Input
   style={{position:"absolute", width: "100%", height: "100%"}}
   onBlur={onBlurcheckInput}
   onChange={(e: any) => onchangeCheck(e)}
   value={value}
   type="number"
/>

或更改为此：

<div style={{height: "100%", position:"absolute"}}>
   <Input
      style={{width: "100%", height: "100%"}}
      onBlur={onBlurcheckInput}
      onChange={(e: any) => onchangeCheck(e)}
      value={value}
      type="number"
   />
</div>

双击样本年龄字段，然后查看身高：DEMO

> Just sample and no real editor

ag-grid CellEditor单元格高度不正确

1 个答案: