2

我正在尝试使用 Facebook 的fixed-data-table构建 JSON 可配置数据表。我来到我的第一个代码为：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { Icon } from 'semantic-ui-react';

import { Table, Column, Cell } from 'fixed-data-table';

const DateCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col].toLocaleString()}
  </Cell>
);

const LinkCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    <a href="#">{data.getObjectAt(rowIndex)[col]}</a>
  </Cell>
);

const TextCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col]}
  </Cell>
);

const NumericCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col]}
  </Cell>
);

const BooleanCell = ({rowIndex, data, col, ...props}) => (
  
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col] ? <Icon name='checkmark' color='green' /> : <Icon name='remove' color='red' />}
  </Cell>
);


class DataTable extends Component {
    state = {
      schema: this.props.schema,
      data: this.props.data,
    }

  getCells = (schema, data) => {

        let columns = [];

        schema.columns.map((column, index) => {

            let cell = (<TextCell></TextCell>);
            let key = column.field + index;

            if (column.type === 'string') {

              cell = (<TextCell 
                          data={this.state.data} 
                          col={column.field}
                        />);
            }

            if (column.type === 'integer') {

              cell = (<NumericCell 
                          data={this.state.data} 
                          col={column.field}
                        />);
            }


            if (column.type === 'boolean') {

              cell = (<BooleanCell 
                          data={this.state.data} 
                          col={column.field}
                        />);
            }


            let col = (<Column 
                          header={column.title}
                          cell={cell}
                          width={100}
                       />);

            columns.push(col);

            return;
          });

      return columns;
    }




  render() {

    let schema = {
      "columns": [
          {
            "title": "Name",
            "field": "name",
            "type": "string",
          },
          {
            "title": "EIN",
            "field": "ein",
            "type": "string",
          },
          {
            "title": "Active",
            "field": "isactive",
            "type": "boolean",
          }
        ],
        "edit": true,
        "delete": true,
        "sort": true
    };

    let data = [
    {
      name: 'Test1',
      ein: '1234',
      isactive: true
    },
    {
      name: 'Test2',
      ein: '123',
      isactive: true
    },
    {
      name: 'Test3',
      ein: '12345',
      isactive: true
    },
    ];

    let columns = this.getCells(schema, data);


    return (
      <Table
        rowHeight={50}
        schemaHeight={50}
        maxHeight={100}
        width={1000}
        height={500}
        rowsCount={data.length}
        {...this.props}>

        {columns}

      </Table>
    );
  }
}

export default DataTable;

运行时出现以下错误：

TypeError: data.getObjectAt is not a function
TextCell
D:\\WORKSPACE\test\src\components\shared\DataTable.js:42
  39 | 
  40 | const TextCell = ({rowIndex, data, col, ...props}) => (
  41 |   <Cell {...props}>
**> 42 |     {data.getObjectAt(rowIndex)[col]}**
  43 |   </Cell>
  44 | );
  45 |

我尝试过不同的 JSON 结构，但没有成功。相应地加载数据和模式。

4

1 回答 1

2

从字面上看，这实际上需要一些时间来初步考虑。

我将使用对“fixed-data-table-2”中代码的引用来描述它。

在表中使用的数据列表被包装在一个对象中，该对象由数据列表和数据列表过滤器数组组成。如果您将列表数据包装为 DataListWrapper 对象以及过滤器数组，其中过滤器数组的每个条目都是一个布尔值，指定相应的列表行是可见（true）还是隐藏（false），您的列表数据才会显示。

请参见 BuildObjectDataListStore 类。那里有一个方法“getObjectAt”，当被调用时，它会根据输入变量名称检索列表行列。例如

var {my_id} = list.getObjectAt(44);

意味着如果索引 44 处的列表行包含名为“my_id”的列，那么该列的值将最终出现在您的 my_id 变量中。这仅适用于“下划线”作为列名中的分隔符，因此任何由“my-id”等列组成的列表在用于“ fixed-data-table ”之前必须转换为“my_id” 。BuildObjectDataListStore 中有一个简洁的转换表过程。

以下是将普通列表数组“myList”包装到固定数据表可以呈现的对象中的方法：

this.dataList = new BuildObjectDataListStore(myList);

然后将此对象与过滤器数组一起包装到一个对象中：

this.filteredDataList = new DataListWrapper(this.filter, this.dataList);

你有它；DataListWrapper 是“固定数据表”可以呈现的公认列表格式。

现在人们使用得到 Schrödinger, Inc. 持续支持的“ fixed-data-table-2 ”。早期的“ fixed-data-table ”作为公共组件被废弃。

从 fixed-data-table 的基础发展而来，fixed-data-table-2 的力量至少是双重的；

  • 可以处理数千行列表数据，而不会因滚动和其他响应而陷入困境。
  • 单元格渲染器的原理意味着可以使任何行列渲染 HTML5 提供的任何内容（文本、图像、视频等）。

因此，对于某些应用程序，此列表组件可能会出现。缺点可能是上述包装原理和列渲染器方法的初始学习曲线。

于 2018-03-09T10:35:23.333 回答