123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- import React, { Component } from 'react';
- import './index.less';
- import Select from '../Select';
- export default class AnswerTable extends Component {
- constructor(props) {
- super(props);
- this.state = { data: this.props.data, index: -1 };
- }
- componentWillMount() { }
- componentWillUnmount() { }
- resort(index) {
- const { data } = this.state;
- let number = true;
- const ii = data.map((row, i) => {
- if (`${Number(row[index])}` !== row[index]) number = false;
- return { value: row[index], index: i };
- }).sort((x, y) => {
- if (x.value === y.value) return 0;
- return number ? Number(x.value) - Number(y.value) : x.value > y.value ? 1 : -1;
- });
- this.setState({
- index,
- data: ii.map((row) => {
- return data[row.index];
- }),
- });
- }
- render() {
- const { columns = [], list = [] } = this.props;
- const { data = [], index } = this.state;
- return (
- <div className="answer-table">
- <div className="select-line">
- <Select size="basic" theme="default" value={index} list={list} onChange={(item) => {
- this.resort(item.key);
- }} />
- </div>
- <table border="1" bordercolor="#d8d8d8">
- <thead>
- <tr className="bg">
- {columns.map(item => {
- return <th>{item.title}</th>;
- })}
- </tr>
- </thead>
- <tbody>
- {data.map(row => {
- return (
- <tr>
- {columns.map(item => {
- return <td>{row[item.key]}</td>;
- })}
- </tr>
- );
- })}
- </tbody>
- </table>
- </div>
- );
- }
- }
|