.NET core 3.1 react-data-grid 教程/示例 [关闭]答案

【问题标题】：.NET core 3.1 react-data-grid tutorials/examples [closed].NET core 3.1 react-data-grid 教程/示例 [关闭]
【发布时间】：2020-01-16 15:41:28
【问题描述】：

我有一个 .net core 3.1 react web 应用程序。我对使用 adazzle 的 react-data-grid 很感兴趣，但我无法找到任何示例实现。 .net core 中是否有 react-data-grid 的示例？

我熟悉 jquery 数据表

【问题讨论】：

标签： c# reactjs react-data-grid asp.net-core-3.1

【解决方案1】：

如果你去他们的examples。只需单击示例网格上的沙箱，它就会打开一个新的codesandbox，其中包含您需要的所有代码。

.net-core 3.1? 唯一需要做的就是将数据传入和传出服务器。除了你在前端使用JS 或TS

这是一个基本的例子

import React from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import "./styles.css";

const columns = [
  { key: "id", name: "ID", editable: true },
  { key: "title", name: "Title", editable: true },
  { key: "complete", name: "Complete", editable: true }
];

const rows = [
  { id: 0, title: "Task 1", complete: 20 },
  { id: 1, title: "Task 2", complete: 40 },
  { id: 2, title: "Task 3", complete: 60 }
];

class Example extends React.Component {
  state = { rows };

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };
  render() {
    return (
      <ReactDataGrid
        columns={columns}
        rowGetter={i => this.state.rows[i]}
        rowsCount={3}
        onGridRowsUpdated={this.onGridRowsUpdated}
        enableCellSelect={true}
      />
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

【讨论】：