TODO: fix expand all
This commit is contained in:
eson
@@ -7,6 +7,7 @@ import 'antd/dist/antd.css';
|
||||
import React from 'react';
|
||||
import './App.less';
|
||||
import DataTable from './Table';
|
||||
import DataTableTest from './TableTest';
|
||||
|
||||
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
@@ -29,6 +30,7 @@ class App extends React.Component {
|
||||
trigger={null}
|
||||
collapsible
|
||||
collapsed={this.state.collapsed}
|
||||
inlineCollapsed={this.state.collapsed}
|
||||
>
|
||||
<Button type="primary" onClick={this.toggleCollapsed} style={{ background: '#6739b6', width: "100%", colorRendering: "optimizeSpeed" }}>
|
||||
|
||||
@@ -36,7 +38,7 @@ class App extends React.Component {
|
||||
</Button>
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}
|
||||
defaultOpenKeys={['sub1']}
|
||||
inlineCollapsed={this.state.collapsed}
|
||||
|
||||
>
|
||||
<Menu.Item key="1" icon={<DatabaseFilled/>} >
|
||||
数据展示
|
||||
@@ -52,7 +54,7 @@ class App extends React.Component {
|
||||
</Header>
|
||||
<Content style={{ margin: '0 8px' }}>
|
||||
<div style={{ padding: 24, background: '#fff', minHeight: 780 }}>
|
||||
<DataTable></DataTable>
|
||||
<DataTable ></DataTable >
|
||||
</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>
|
||||
|
||||
389
src/Table.js
389
src/Table.js
@@ -1,246 +1,213 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Table, Input, InputNumber, Popconfirm, Form } from 'antd';
|
||||
import { Table, Input, InputNumber, Popconfirm, Form, Tag } from 'antd';
|
||||
import reqwest from 'reqwest';
|
||||
import './Table.less';
|
||||
import { useForm } from 'antd/lib/form/Form';
|
||||
|
||||
const originData = [];
|
||||
|
||||
// for (let i = 0; i < 200; i++) {
|
||||
// originData.push({
|
||||
// key: i.toString(),
|
||||
// name: `Edrward ${i}`,
|
||||
// age: 32,
|
||||
// address: `London Park no. ${i}`,
|
||||
// });
|
||||
// }
|
||||
|
||||
const EditableCell = ({
|
||||
editing,
|
||||
dataIndex,
|
||||
title,
|
||||
inputType,
|
||||
record,
|
||||
index,
|
||||
children,
|
||||
...restProps
|
||||
}) => {
|
||||
const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
|
||||
return (
|
||||
<td {...restProps}>
|
||||
{editing ? (
|
||||
<Form.Item
|
||||
name={dataIndex}
|
||||
style={{
|
||||
margin: 0,
|
||||
}}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: `Please Input ${title}!`,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{inputNode}
|
||||
</Form.Item>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</td>
|
||||
);
|
||||
};
|
||||
|
||||
const DataTable = () => {
|
||||
const [form] = Form.useForm();
|
||||
const [data, setData] = useState(originData);
|
||||
const [editingKey, setEditingKey] = useState('');
|
||||
|
||||
fetch = (params = {}) => {
|
||||
this.setState({ loading: true });
|
||||
reqwest({
|
||||
url: 'http://localhost:5500/twitcasting/data?page=0',
|
||||
method: 'get',
|
||||
type: 'json',
|
||||
data: (params),
|
||||
}).then(data => {
|
||||
console.log(data);
|
||||
this.setState({
|
||||
loading: false,
|
||||
data: data.results,
|
||||
pagination: {
|
||||
...params.pagination,
|
||||
total: data.totalCount,
|
||||
// 200 is mock data, you should read it from server
|
||||
// total: data.totalCount,
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const isEditing = record => record.key === editingKey;
|
||||
|
||||
const edit = record => {
|
||||
form.setFieldsValue({
|
||||
name: '',
|
||||
age: '',
|
||||
address: '',
|
||||
...record,
|
||||
});
|
||||
setEditingKey(record.key);
|
||||
};
|
||||
|
||||
const cancel = () => {
|
||||
setEditingKey('');
|
||||
};
|
||||
|
||||
const save = async key => {
|
||||
try {
|
||||
const row = await form.validateFields();
|
||||
const newData = [...data];
|
||||
const index = newData.findIndex(item => key === item.key);
|
||||
|
||||
if (index > -1) {
|
||||
const item = newData[index];
|
||||
newData.splice(index, 1, { ...item, ...row });
|
||||
setData(newData);
|
||||
setEditingKey('');
|
||||
} else {
|
||||
newData.push(row);
|
||||
setData(newData);
|
||||
setEditingKey('');
|
||||
}
|
||||
} catch (errInfo) {
|
||||
console.log('Validate Failed:', errInfo);
|
||||
}
|
||||
};
|
||||
const columns = [
|
||||
{
|
||||
title: 'uid',
|
||||
dataIndex: 'uid',
|
||||
editable: false,
|
||||
},
|
||||
const columns = [
|
||||
// {
|
||||
// title: 'uid',
|
||||
// dataIndex: 'Uid',
|
||||
// editable: false,
|
||||
// width: "7%",
|
||||
// },
|
||||
{
|
||||
title: '平台',
|
||||
dataIndex: 'platform',
|
||||
dataIndex: 'Platform',
|
||||
editable: false,
|
||||
// width: "8%",
|
||||
},
|
||||
{
|
||||
title: '平台id',
|
||||
dataIndex: 'user_id',
|
||||
title: 'userid',
|
||||
dataIndex: 'UserId',
|
||||
editable: false,
|
||||
// width: "7%",
|
||||
},
|
||||
{
|
||||
title: '平台名称',
|
||||
dataIndex: 'user_name',
|
||||
editable: false,
|
||||
},
|
||||
{
|
||||
title: '直播地址',
|
||||
dataIndex: 'live_url',
|
||||
title: '名称',
|
||||
dataIndex: 'UserName',
|
||||
editable: false,
|
||||
// width: "7%",
|
||||
},
|
||||
// {
|
||||
// title: '直播地址',
|
||||
// dataIndex: 'LiveUrl',
|
||||
// editable: false,
|
||||
// width: "5%",
|
||||
// },
|
||||
{
|
||||
title: '标签',
|
||||
dataIndex: 'tags',
|
||||
dataIndex: 'Tags',
|
||||
editable: false,
|
||||
render: tags => (
|
||||
<>
|
||||
{tags.map( tag => {
|
||||
let color = "purple";
|
||||
if (tag.length < 3) {
|
||||
color = 'green';
|
||||
} else if (tag.length < 6) {
|
||||
color = 'geekblue';
|
||||
} else if (tag.length < 9) {
|
||||
color = 'volcano';
|
||||
}
|
||||
|
||||
return (
|
||||
<Tag color={color} key={tag}>
|
||||
{tag}
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</> )
|
||||
},
|
||||
{
|
||||
title: '粉丝数(关注)',
|
||||
dataIndex: 'followers',
|
||||
editable: true,
|
||||
dataIndex: 'Followers',
|
||||
width: "8%",
|
||||
},
|
||||
{
|
||||
title: '礼物数(币|钱)',
|
||||
dataIndex: 'gratuity',
|
||||
editable: true,
|
||||
},
|
||||
{
|
||||
title: '直播标题',
|
||||
dataIndex: 'live_title',
|
||||
editable: true,
|
||||
},
|
||||
{
|
||||
title: '近直播开始时间',
|
||||
dataIndex: 'live_start_time',
|
||||
editable: true,
|
||||
},
|
||||
{
|
||||
title: '近直播结束时间',
|
||||
dataIndex: 'live_end_time',
|
||||
editable: true,
|
||||
dataIndex: 'Gratuity',
|
||||
width: "8%",
|
||||
},
|
||||
|
||||
// {
|
||||
// title: '直播地址',
|
||||
// dataIndex: 'LiveUrl',
|
||||
// width: "5%",
|
||||
// },
|
||||
// {
|
||||
// title: '直播标题',
|
||||
// dataIndex: 'LiveTitle',
|
||||
// },
|
||||
// {
|
||||
// title: '近直播开始时间',
|
||||
// dataIndex: 'LiveStartTime',
|
||||
// width: "7%",
|
||||
// },
|
||||
// {
|
||||
// title: '近直播结束时间',
|
||||
// dataIndex: 'LiveEndTime',
|
||||
// width: "7%",
|
||||
// },
|
||||
{
|
||||
title: '数据更新时间',
|
||||
dataIndex: 'update_time',
|
||||
editable: true,
|
||||
},
|
||||
{
|
||||
title: 'operation',
|
||||
dataIndex: 'operation',
|
||||
render: (_, record) => {
|
||||
const editable = isEditing(record);
|
||||
return editable ? (
|
||||
<span>
|
||||
<a
|
||||
href="javascript:;"
|
||||
onClick={() => save(record.key)}
|
||||
style={{
|
||||
marginRight: 8,
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</a>
|
||||
<Popconfirm title="Sure to cancel?" onConfirm={cancel}>
|
||||
<a>Cancel</a>
|
||||
</Popconfirm>
|
||||
</span>
|
||||
) : (
|
||||
<a disabled={editingKey !== ''} onClick={() => edit(record)}>
|
||||
Edit
|
||||
</a>
|
||||
);
|
||||
},
|
||||
dataIndex: 'UpdateTime',
|
||||
// width: "7%",
|
||||
},
|
||||
];
|
||||
const mergedColumns = columns.map(col => {
|
||||
if (!col.editable) {
|
||||
return col;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const getRandomuserParams = params => {
|
||||
return {
|
||||
...col,
|
||||
onCell: record => ({
|
||||
record,
|
||||
inputType: col.dataIndex === 'age' ? 'number' : 'text',
|
||||
dataIndex: col.dataIndex,
|
||||
title: col.title,
|
||||
editing: isEditing(record),
|
||||
|
||||
}),
|
||||
psize: params.pagination.pageSize,
|
||||
page: params.pagination.current,
|
||||
// ...params,
|
||||
};
|
||||
});
|
||||
return (
|
||||
<Form form={form} component={false}>
|
||||
<Table size="small"
|
||||
pagination={{
|
||||
pageSize: 20,
|
||||
position: ["topLeft"],
|
||||
onChange: cancel,
|
||||
}}
|
||||
|
||||
components={{
|
||||
body: {
|
||||
cell: EditableCell,
|
||||
},
|
||||
}}
|
||||
bordered
|
||||
dataSource={data}
|
||||
columns={mergedColumns}
|
||||
|
||||
rowClassName="editable-row"
|
||||
};
|
||||
|
||||
/>
|
||||
</Form>
|
||||
);
|
||||
|
||||
|
||||
|
||||
class DataTable extends React.Component {
|
||||
|
||||
state = {
|
||||
data: [],
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
position: ["topLeft"],
|
||||
},
|
||||
loading: false,
|
||||
};
|
||||
|
||||
expandedRow = (record) => {
|
||||
|
||||
const ecolumns = [
|
||||
{
|
||||
title: 'uid',
|
||||
dataIndex: 'Uid',
|
||||
},
|
||||
{
|
||||
title: '直播标题',
|
||||
dataIndex: 'LiveTitle',
|
||||
},
|
||||
{
|
||||
title: '近直播开始时间',
|
||||
dataIndex: 'LiveStartTime',
|
||||
},
|
||||
{
|
||||
title: '近直播结束时间',
|
||||
dataIndex: 'LiveEndTime',
|
||||
},
|
||||
];
|
||||
|
||||
var data = [record];
|
||||
return <Table bordered={true} type="small" columns={ecolumns} dataSource={data} pagination={false} />;
|
||||
};
|
||||
|
||||
|
||||
componentDidMount() {
|
||||
const { pagination } = this.state;
|
||||
this.fetch({
|
||||
pagination
|
||||
});
|
||||
}
|
||||
|
||||
handleTableChange = (pagination, filters, sorter) => {
|
||||
console.log(filters, sorter);
|
||||
this.fetch({
|
||||
sortField: sorter.field,
|
||||
sortOrder: sorter.order,
|
||||
pagination,
|
||||
...filters,
|
||||
});
|
||||
};
|
||||
|
||||
fetch = (params = {}) => {
|
||||
this.setState({ loading: true });
|
||||
reqwest({
|
||||
url: 'http://localhost:5500/twitcasting/query',
|
||||
method: 'get',
|
||||
type: 'json',
|
||||
data: getRandomuserParams(params),
|
||||
}).then(data => {
|
||||
var result = JSON.parse(data)
|
||||
this.setState({
|
||||
loading: false,
|
||||
data: result.Data?result.Data:[],
|
||||
pagination: {
|
||||
...params.pagination,
|
||||
total: 100000,
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { data, pagination, loading } = this.state;
|
||||
|
||||
|
||||
return (
|
||||
|
||||
|
||||
|
||||
<Table
|
||||
bordered={true}
|
||||
|
||||
// scroll={{ x: "150vh", y:"800" }}
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
pagination={pagination}
|
||||
loading={loading}
|
||||
onChange={this.handleTableChange}
|
||||
expandable={{
|
||||
expandedRowRender: this.expandedRow
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
69
src/TableTest.js
Normal file
69
src/TableTest.js
Normal file
@@ -0,0 +1,69 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Table, Badge, Menu, Dropdown, Space } from 'antd';
|
||||
import { DownOutlined } from '@ant-design/icons';
|
||||
|
||||
|
||||
|
||||
|
||||
function NestedTable() {
|
||||
const expandedRowRender = () => {
|
||||
const columns = [
|
||||
{ title: 'Date', dataIndex: 'date', key: 'date' },
|
||||
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
data.push({
|
||||
key: i,
|
||||
date: '2014-12-24 23:12:00',
|
||||
name: 'This is production name',
|
||||
upgradeNum: 'Upgraded: 56',
|
||||
});
|
||||
}
|
||||
return <Table columns={columns} dataSource={data} pagination={false} />;
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
|
||||
{ title: 'Version', dataIndex: 'version', key: 'version' },
|
||||
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
|
||||
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
|
||||
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
|
||||
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: 'Screem',
|
||||
platform: 'iOS',
|
||||
version: '10.3.4.5654',
|
||||
upgradeNum: 500,
|
||||
creator: 'Jack',
|
||||
createdAt: '2014-12-24 23:12:00',
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Table
|
||||
className="components-table-demo-nested"
|
||||
columns={columns}
|
||||
expandable={{ expandedRowRender }}
|
||||
dataSource={data}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
class DataTableTest extends React.Component {
|
||||
render() {
|
||||
return <NestedTable></NestedTable>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default DataTableTest;
|
||||
//
|
||||
Reference in New Issue
Block a user