Skip to content

A
ant-design

文档服务地址：http://47.92.0.57:3000/ 周报索引地址：http://47.92.0.57:3000/s/NruNXRYmV

Commit fc973372 by gj
Options

数据详情

parent 5132a31d
Showing with 0 additions and 282 deletions
table/src/index.html deleted 100755 → 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.7.3/antd.min.css">
<style>
#app {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 44px;
}
.section {
margin: 1em 0;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.7.3/antd.min.js"></script>
<script>const mountNode = document.getElementById('app');</script>
<script type="text/babel">
const { Table, Divider, Tag, Button } = antd;
const { Column, ColumnGroup } = Table;
class App extends React.Component {
constructor() {
super();
this.state = {
selectedRowKeys2: [],
selectedRowKeys3: [],
loading: false,
}
}
render() {
const columns1 = [{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a href="javascript:;">{text}</a>,
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
}, {
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
render: tags => (
<span>
{tags.map(tag => <Tag color="blue" key={tag}>{tag}</Tag>)}
</span>
),
}, {
title: 'Action',
key: 'action',
render: (text, record) => (
<span>
<a href="javascript:;">Invite {record.name}</a>
<Divider type="vertical" />
<a href="javascript:;">Delete</a>
</span>
),
}];
const data1 = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
}, {
key: '4',
name: 'Disabled User',
age: 99,
address: 'Sidney No. 1 Lake Park',
tags: [],
}];
const data2 = [{
key: '1',
firstName: 'John',
lastName: 'Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
}, {
key: '2',
firstName: 'Jim',
lastName: 'Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
}, {
key: '3',
firstName: 'Joe',
lastName: 'Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
}];
// rowSelection object indicates the need for row selection
const rowSelection1 = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
name: record.name,
}),
};
const rowSelection2 = {
selectedRowKeys: this.state.selectedRowKeys2,
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
this.setState({ selectedRowKeys2: selectedRowKeys });
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
name: record.name,
}),
};
const rowSelection3 = {
hideDefaultSelections: true,
selectedRowKeys: this.state.selectedRowKeys3,
selections: [{
key: 'all-data',
text: 'Select All Data',
onSelect: (changableRowKeys) => {
this.setState({
selectedRowKeys3: changableRowKeys,
});
},
}, {
key: 'odd',
text: 'Select Odd Row',
onSelect: (changableRowKeys) => {
let newSelectedRowKeys = [];
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
if (index % 2 !== 0) {
return false;
}
return true;
});
this.setState({ selectedRowKeys3: newSelectedRowKeys });
},
}, {
key: 'even',
text: 'Select Even Row',
onSelect: (changableRowKeys) => {
let newSelectedRowKeys = [];
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
if (index % 2 !== 0) {
return true;
}
return false;
});
this.setState({ selectedRowKeys3: newSelectedRowKeys });
},
}],
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
this.setState({ selectedRowKeys3: selectedRowKeys });
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
name: record.name,
}),
};
return (
<div>
<div>
<h2>1. Basic Usage</h2>
<Table columns={columns1} dataSource={data1} />
</div>
<div>
<h2>2. JSX Style API, for columns, after v2.5.0</h2>
<Table dataSource={data2}>
<ColumnGroup title="Name">
<Column
title="First Name"
dataIndex="firstName"
key="firstName"
/>
<Column
title="Last Name"
dataIndex="lastName"
key="lastName"
/>
</ColumnGroup>
<Column
title="Age"
dataIndex="age"
key="age"
/>
<Column
title="Address"
dataIndex="address"
key="address"
/>
<Column
title="Tags"
dataIndex="tags"
key="tags"
render={tags => (
<span>
{tags.map(tag => <Tag color="blue" key={tag}>{tag}</Tag>)}
</span>
)}
/>
<Column
title="Action"
key="action"
render={(text, record) => (
<span>
<a href="javascript:;">Invite {record.lastName}</a>
<Divider type="vertical" />
<a href="javascript:;">Delete</a>
</span>
)}
/>
</Table>
</div>
<div>
<h2>3. Row Selection</h2>
<Table rowSelection={rowSelection1} columns={columns1} dataSource={data1} />
</div>
<div>
<h2>4. Row Selection and Operation</h2>
<Button onClick={() => this.setState({ selectedRowKeys: [] })}>Do Operation and Clear</Button>
<Table rowSelection={rowSelection2} columns={columns1} dataSource={data1} />
</div>
<div>
<h2>5. Custom Row Selection</h2>
<Table rowSelection={rowSelection3} columns={columns1} dataSource={data1} />
</div>
</div>
);
}
}
</script>
<script type="text/babel">ReactDOM.render(<App />, mountNode);</script>
<script src="https://github.johannhuang.com/ant-design-demos/libs/js/iifes/canvas-nest.min.js"></script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment