如何从 blueprintjs 表中获取数据答案

【问题标题】：How to get data from blueprintjs table如何从 blueprintjs 表中获取数据
【发布时间】：2020-08-03 20:38:03
【问题描述】：

我创建了一个 blueprintjs 表，我希望能够以 JSON 格式获取它的数据。我不想得到所有的列。只有特定的，我只会逐行排列。这是我说的格式：

{
     "Campaign": "5",
     "Date Sent": "5 days ago"
}

这是我目前渲染表格的方式。我上面有一个按钮，它将调用我希望执行此功能的 javascript 函数。在 blueprintjs 表格文档中，我找不到与实际解析表格相关的任何内容。我只找到了与获取数据有关的函数，例如行数等。

render() {
    const { data } = this.props;
    const { length } = data;
    return (
      <Table
        numRows={length}
      >
        <Column name="Campaign" cellRenderer={this.renderCell} />
        <Column name="Date Sent" cellRenderer={this.renderCell} />
        <Column name="Queueing" cellRenderer={this.renderCell} />
        <Column name="Sent" cellRenderer={this.renderCell} />
        <Column name="Open" cellRenderer={this.renderCell} />
      </Table>
    );
  }
}

【问题讨论】：

标签： javascript html-table blueprint blueprintjs

【解决方案1】：

在蓝图中table documentation：

该表与数据无关。它不会在内部存储任何数据，因此您可以将表绑定到您的数据。

因此可以直接从您作为道具传递的data 获取数据。

例如，要选择一些单元格并获得“复制”按钮，请参阅此演示：https://blueprintjs.com/docs/#table/features.sorting

还有一个getCellClipboardData in the table API 允许您的用户使用 mod+c 进行复制/粘贴。它的工作方式是获取行和列参数，然后只检索该数据。

如果您的数据是 data[row][column]，我为您做了一个示例，使用 mod+c 复制/粘贴选定的单元格和一个“提取”第一列和第二列的按钮。

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/table/lib/css/table.css";
import { Button } from "@blueprintjs/core";
import { Cell, Column, Table } from "@blueprintjs/table";

export default function App() {
  const data = [
    [1, "2 days ago", 3],
    [4, "5 days ago", 6]
  ];

  const getCellData = (rowIndex: number, columnIndex: number) => {
    return data[rowIndex][columnIndex];
  };

  const cellRenderer = (rowIndex: number, columnIndex: number) => (
    <Cell>{`${data[rowIndex][columnIndex]}`}</Cell>
  );

  const columns = ["Campaign", "Date Sent", "Queueing"].map(
    (element: string, index: number) => {
      return <Column key={index} name={element} cellRenderer={cellRenderer} />;
    }
  );

  const extractData = () => {
    var results = [];
    for (var i = 0; i < data.length; i++) {
      var myData = {
        Campaign: data[i][0],
        "Date Sent": data[i][1]
      };
      results.push(myData);
    }

    var myJSON = JSON.stringify(results);
    alert(myJSON);
  };

  return (
    <>
      <Table numRows={data.length} getCellClipboardData={getCellData}>
        {columns}
      </Table>
      <Button onClick={extractData}>"Copy first and second column"</Button>
    </>
  );
}

https://codesandbox.io/s/frosty-wozniak-djk9d?file=/src/App.tsx

【讨论】：