如何从blueprintjs表中获取数据

Question

我已经创建了一个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>
    );
  }
}

Answer 1

在蓝图table documentation中

该表是数据不可知的。它不在内部存储任何数据，因此由您决定是否将表绑定到您的数据。

所以可以直接从你作为道具传递的data中获取数据。

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

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

我已经为您提供了一个示例，如果您的数据是一个数据行，则使用mod+c copy/paste对选定的单元格进行复制/粘贴，并使用一个按钮“提取”第一列和第二列。

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