javascript - ag-grid CellEditor 单元格高度不正确
问题描述
我正在使用带有反应 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: 更改单元格高度
解决方案
像这样更改您的编辑器输入样式:
将此添加到您的 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>
示例-双击 Age 字段并查看高度:DEMO
> Just sample and no real editor
推荐阅读
- javascript - 在 Python 中的 BeautySoup 之后解析脚本标签
- python - 在 python 中使用 zerorpc 对项目进行 dockerizing 时导入错误
- django - 获取 DTL 模板中字符串的特定长度
- excel - Visual Basic 中的 Dim 语句和调用单元格
- typescript - TypeScript - 数组的约束
- amazon-web-services - 使用安装到 Elastic Beanstalk 的 CakePHP 3 中的 DynamoDB
- java - 如何在 swing 中连接到 h2 数据库
- java - Gradle - 未加载类:org.docx4j.jaxb.Context
- javascript - 仅在调用 html 文件中的函数后才对 init 应用程序做出反应
- c# - 如何在 NavigationProvider 中对齐菜单?