在AG-Grid-Reaction中,如果API Response的布尔值为TRUE或FALSE,则默认情况下,AG-GRID-REACT会显示复选框.AG-GRID-REACT中是否有属性以在列而不是复选框中将值显示为真或假.

如果有任何财产可以实现这一点,有人能帮忙吗?

推荐答案

您可以定义属性cellDataType并将其设置为字符串,这样您得到的不是复选框而是实际值!

import { ColDef } from "ag-grid-community";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import { AgGridReact } from "ag-grid-react";
import React, { useState } from "react";
import { createRoot } from "react-dom/client";

// Row Data Interface
interface IRow {
  make: string;
  model: string;
  price: number;
  electric: boolean;
}

// Create new GridExample component
const GridExample = () => {
  // Row Data: The data to be displayed.
  const [rowData, setRowData] = useState<IRow[]>([
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
  ]);

  // Column Definitions: Defines & controls grid columns.
  const [colDefs, setColDefs] = useState<ColDef<IRow>[]>([
    { field: "make" },
    { field: "model" },
    { field: "price" },
    { field: "electric", cellDataType: "string" },
  ]);

  // Container: Defines the grid's theme & dimensions.
  return (
    <div
      className={"ag-theme-quartz"}
      style={{ width: "100%", height: "100%" }}
    >
      <AgGridReact rowData={rowData} columnDefs={colDefs} />
    </div>
  );
};

// Render GridExample
const root = createRoot(document.getElementById("root")!);
root.render(<GridExample />);

code sandbox

Javascript相关问答推荐

React Hooks中useState的同步问题

如何在JavaScript中在文本内容中添加新行

如何在使用fast-xml-parser构建ML时包括属性值?

硬币兑换运行超时

Rehype将hashtag呈现为URL

jQuery s data()[storage object]在vanilla JavaScript中?'

阿波罗返回的数据错误,但在网络判断器中是正确的

用于编辑CSS样式的Java脚本

如何在输入元素中附加一个属性为checkbox?

如何修复我的数据表,以使stateSave正常工作?

单个HTML中的多个HTML文件

WhatsApp Cloud API上载问题:由于MIME类型不正确而导致接收&Quot;INVALID_REQUEST";错误

钛中的onClick事件需要在两次点击之间等待几秒钟

<;img>;标记无法呈现图像

令牌JWT未过期

每次重新呈现时调用useState initialValue函数

将Singleton实例设置为未定义后的Angular 变量引用持久性行为

在单击按钮时生成多个表单时的处理状态

当达到高度限制时,如何裁剪图像?使用html和css

如何为Reaction应用程序创建仅登录的路由?