Fatal编程技术网
  • javascript/
  • Javascript React.js创建具有动态列和动态行的动态表

Javascript React.js创建具有动态列和动态行的动态表

javascript reactjs

Javascript React.js创建具有动态列和动态行的动态表,javascript,reactjs,semantic-ui-react,dynamic-tables,Javascript,Reactjs,Semantic Ui React,Dynamic Tables,我对React相当陌生，我有一个名为DynamicTable的React函数组件。我正在从api传递一些json数据，如下所示： const tableData2 = [ {"RelocationId":1,"AssociateId":"2","StartingLocation":"Jacksonville","EndingLocation":"Macon&q

我对React相当陌生，我有一个名为DynamicTable的React函数组件。我正在从api传递一些json数据，如下所示：

const tableData2 = [
    {"RelocationId":1,"AssociateId":"2","StartingLocation":"Jacksonville","EndingLocation":"Macon","PlanningCenter":"Buffalo","CostCenter":"A","OpenDate":"2020-10-20T00:00:00","CloseDate":"2020-10-22T00:00:00","RelocationTypeId":"Full Relocation"},
    {"RelocationId":2,"AssociateId":"2","StartingLocation":"Los Angelos","EndingLocation":"New York","PlanningCenter":"Detroit","CostCenter":"B","OpenDate":"2020-09-20T00:00:00","RelocationTypeId":"Full Relocation"},
    {"RelocationId":3,"AssociateId":"1","StartingLocation":"Washington DC","EndingLocation":"Houston","PlanningCenter":"Dalls","CostCenter":"C","OpenDate":"2020-08-08T00:00:00","CloseDate":"2020-08-15T00:00:00","RelocationTypeId":"Full Relocation"},
    {"RelocationId":4,"AssociateId":"1","StartingLocation":"Lakeland","EndingLocation":"Atlanta","PlanningCenter":"Seattle","CostCenter":"D","OpenDate":"2020-09-12T00:00:00","CloseDate":"2020-09-28T00:00:00","RelocationTypeId":"Full Relocation"},
    {"RelocationId":5,"AssociateId":"1","StartingLocation":"San Diego","EndingLocation":"Woodbury","PlanningCenter":"Baltimore","CostCenter":"E","OpenDate":"2020-10-02T00:00:00","CloseDate":"2020-10-17T00:00:00","RelocationTypeId":"Full Relocation"}
]
我有一个renderTableHeader函数，它调用另一个名为FindMostProperties的函数，该函数基本上在数组中查找上述每个json对象，找到具有大多数键的对象，然后在renderTableHeader中创建列：

var indexOfMostProperties;

function renderTableHeader() {
        tableData2.forEach(FindMostProperties);

        let header = Object.keys(tableData2[indexOfMostProperties])
        return header.map((key, index) => {
            return <Table.HeaderCell key={index}>{key.toUpperCase()}</Table.HeaderCell>
        })
    }

function FindMostProperties(item, index) {
        var currentObjectProperties = Object.keys(item).length;

        if(currentObjectProperties > mostProperties) {
            mostProperties = currentObjectProperties;
            indexOfMostProperties = index;
        }
    }
我想要的是这个结果，其中第二个对象的CloseDate列中有一个空白结果，并且重新定位类型在正确的列中：


+--------------+-------------+------------------+----------------+----------------+------------+---------------------+---------------------+------------------+--+
| RelocationId | AssociateId | StartingLocation | EndingLocation | PlanningCenter | CostCenter |      OpenDate       |      CloseDate      | RelocationTypeId |  |
+--------------+-------------+------------------+----------------+----------------+------------+---------------------+---------------------+------------------+--+
|            1 |           2 | Jacksonville     | Macon          | Buffalo        | A          | 2020-10-20T00:00:00 | 2020-10-22T00:00:00 | Full Relocation  |  |
|            2 |           2 | Los Angelos      | New York       | Detroit        | B          | 2020-09-20T00:00:00 |                     | Full Relocation  |  |
+--------------+-------------+------------------+----------------+----------------+------------+---------------------+---------------------+------------------+--+
我正在为react组件使用以下库。表组件来自语义UI React库（V0.88.2）和使用React（V16.13.1）的Im，下面是调用这些表上呈现函数的组件：

import React from 'react';
import { Table } from 'semantic-ui-react':

return(
        <div>
            <Table>
                <div>
                    <Table.Header>
                        <Table.Row>
                            {renderTableHeader()}
                        </Table.Row>
                    </Table.Header>
                    <Table.Body>
                        {renderTableData()}
                    </Table.Body>
                </div>
            </Table>
        </div>
    );

从“React”导入React；
从“语义ui反应”导入{Table}
返回(
{renderTableHeader（）}
{renderTableData（）}
);
呈现表格数据时，呈现的列数不同。也就是说，在
renderTableData（）
函数中，您正在为每个对象（数量不同）的每个属性创建一个新单元。您应该使用具有大多数属性的对象的键作为常量，只需为不存在的属性返回一个空单元格。如下所示：

function renderTableData() {
        let col = Object.keys(tableData2[indexOfMostProperties]); // this can be defined before the map
        return tableData2.map((record, index) => {
            console.log(col);
            return(
                <Table.Row key={record.RelocationId}>
                    {col.map((val, index) => {
                        if (record[col[index]]) {
                            // property exists on object
                            return <Table.Cell key={index}>{record[col[index]]}</Table.Cell>
                        } else {
                            // property doesn't exist
                            return <Table.Cell key={index}></Table.Cell>
                        }
                    })}
                </Table.Row>
            )
        }) 
    }

函数renderTableData（）{
让col=Object.keys（tableData2[indexOfMostProperties]）；//这可以在映射之前定义
return tableData2.map（（记录，索引）=>{
控制台日志（col）；
返回(
{col.map（（val，index）=>{
如果（记录[列[索引]）{
//对象上存在属性
返回{record[col[index]]}
}否则{
//财产不存在
返回
}
})}
)
}) 
}
编辑：

需要考虑的一些额外优化：

function renderTableData() {
        let col = Object.keys(tableData2[indexOfMostProperties]); // this can be defined before the map
        return tableData2.map(record => {
            console.log(col);
            return(
                <Table.Row key={record.RelocationId}>
                    {col.map((val, index) => {
                        // conditional insertion
                        return <Table.Cell key={index}>{record[val] || ''}</Table.Cell>
                    })}
                </Table.Row>
            )
        }) 
    }

函数renderTableData（）{
让col=Object.keys（tableData2[indexOfMostProperties]）；//这可以在映射之前定义
返回tableData2.map（记录=>{
控制台日志（col）；
返回(
{col.map（（val，index）=>{
//条件插入
返回{record[val]| |'''}
})}
)
}) 
}
呈现表格数据时，呈现的列数不同。也就是说，在
renderTableData（）
函数中，您正在为每个对象（数量不同）的每个属性创建一个新单元。您应该使用具有大多数属性的对象的键作为常量，只需为不存在的属性返回一个空单元格。如下所示：

function renderTableData() {
        let col = Object.keys(tableData2[indexOfMostProperties]); // this can be defined before the map
        return tableData2.map((record, index) => {
            console.log(col);
            return(
                <Table.Row key={record.RelocationId}>
                    {col.map((val, index) => {
                        if (record[col[index]]) {
                            // property exists on object
                            return <Table.Cell key={index}>{record[col[index]]}</Table.Cell>
                        } else {
                            // property doesn't exist
                            return <Table.Cell key={index}></Table.Cell>
                        }
                    })}
                </Table.Row>
            )
        }) 
    }

函数renderTableData（）{
让col=Object.keys（tableData2[indexOfMostProperties]）；//这可以在映射之前定义
return tableData2.map（（记录，索引）=>{
控制台日志（col）；
返回(
{col.map（（val，index）=>{
如果（记录[列[索引]）{
//对象上存在属性
返回{record[col[index]]}
}否则{
//财产不存在
返回
}
})}
)
}) 
}
编辑：

需要考虑的一些额外优化：

function renderTableData() {
        let col = Object.keys(tableData2[indexOfMostProperties]); // this can be defined before the map
        return tableData2.map(record => {
            console.log(col);
            return(
                <Table.Row key={record.RelocationId}>
                    {col.map((val, index) => {
                        // conditional insertion
                        return <Table.Cell key={index}>{record[val] || ''}</Table.Cell>
                    })}
                </Table.Row>
            )
        }) 
    }

函数renderTableData（）{
让col=Object.keys（tableData2[indexOfMostProperties]）；//这可以在映射之前定义
返回tableData2.map（记录=>{
控制台日志（col）；
返回(
{col.map（（val，index）=>{
//条件插入
返回{record[val]| |'''}
})}
)
}) 
}