import 'choerodon-ui/dist/choerodon-ui.css';
import 'choerodon-ui/dist/choerodon-ui-pro.css';
import 'choerodon-ui/dist/choerodon-ui-demo-data-mock.min.js';
import React from 'react';
import ReactDOM from 'react-dom';
import { Button, PerformanceTable } from 'choerodon-ui/pro';
const fakeTreeData = [
{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
children: [
{
key: 11,
name: 'John Brown',
age: 42,
address: 'New York No. 2 Lake Park',
},
{
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [
{
key: 121,
name: 'Jimmy Brown',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
},
{
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [
{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [
{
key: 1311,
name: 'Jim Green jr.',
age: 25,
address: 'London No. 3 Lake Park',
},
{
key: 1312,
name: 'Jimmy Green sr.',
age: 18,
address: 'London No. 4 Lake Park',
},
],
},
],
},
],
},
{
key: 2,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
]
const rowKey = 'key'
// 拍平数组
const flatNode = list => {
return list.reduce((total, cur) => {
const t = total.concat(cur);
return cur.children ? t.concat(flatNode(cur.children)) : t;
}, []);
};
/**
* 通过当前id 在原数组中查找该id对应的节点
* @param {*} list 原数组
* @param {*} curLineId 查找id
*/
const getChildNode = (list, curLineId) => {
const arr = [];
for (let i = 0; i < list.length; i++) {
const item = list[i];
if (item[rowKey] === curLineId) {
arr.push(item);
break;
} else if (item.children) {
const result = getChildNode(item.children, curLineId);
if (result.length) arr.push(result[0]);
}
}
return arr;
};
const uniq = (arr) => [...new Set(arr)]
const handleRowKeys = list => list.map(v => v[rowKey]);
class TreeTable extends React.Component {
constructor(props) {
super(props);
this.state = {
data: fakeTreeData.slice(0, 100),
selectedRowKeys: [],
selectedRows: []
};
}
// componentDidMount() {
// fetch('https://open-hand.github.io/choerodon-ui/zh/procmp/data/fakeLargeData.json')
// .then((response) => response.json())
// .then((data) => {
// this.setState({
// data: data
// })
// });
// }
setSelectedRowKeys = (selectedRowKeys) => {
this.setState({ selectedRowKeys: uniq(selectedRowKeys) });
}
setSelectedRows = (selectedRows) => {
this.setState({ selectedRows: uniq(selectedRows) })
}
onRowSelect = (record, selected, _selectedRows) => {
const { selectedRowKeys, selectedRows } = this.state;
console.log(selected, 'selected')
if (selected) {
const curLineId = record[rowKey];
// 选中时
const arr = getChildNode(this.state.data, curLineId);
const list = flatNode(arr);
const rowKeys = handleRowKeys(list);
this.setSelectedRowKeys([...selectedRowKeys, ...rowKeys]);
this.setSelectedRows([...selectedRows, ...list]);
} else {
// 取消
const curRowKey = record[rowKey];
this.setSelectedRowKeys(selectedRowKeys.filter(v => v !== curRowKey));
// 返回的 _selectedRows 中已经过滤掉
this.setSelectedRows(_selectedRows);
}
};
onSelectAll = selected => {
if (selected) {
// 全选
const list = flatNode(this.state.data);
const rowKeys = handleRowKeys(list);
this.setSelectedRowKeys(rowKeys);
this.setSelectedRows(list);
} else {
// 取消
this.setSelectedRowKeys([]);
this.setSelectedRows([]);
}
};
get rowSelection() {
const { selectedRowKeys } = this.state;
const rowSelection = {
type: 'checkbox',
columnWidth: 100,
fixed: true,
selectedRowKeys,
// checkStrictly: true,
onSelect: this.onRowSelect,
onSelectAll: this.onSelectAll,
}
return rowSelection;
}
render() {
// const { rowSelection } = this;
const { data, selectedRowKeys } = this.state;
console.log(selectedRowKeys, 'selectedRowKeys')
const rowSelection = {
type: 'checkbox',
columnWidth: 100,
fixed: true,
selectedRowKeys,
checkStrictly: true,
onSelect: this.onRowSelect,
onSelectAll: this.onSelectAll,
}
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 200,
treeCol: true,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 300,
},
{
title: 'Address',
dataIndex: 'address',
width: 500,
key: 'address',
},
];
return (
<div>
<Button onClick={() => {
this.setSelectedRowKeys([12, 121])
}}>
动态更新selectedRowKeys
</Button>
<PerformanceTable
isTree
virtualized
rowKey={rowKey}
minHeight={260}
height={400}
data={data}
columns={columns}
rowSelection={rowSelection}
defaultExpandedRowKeys={[0]}
onExpandChange={(expanded, rowData) => {
// console.log(expanded, rowData);
}}
// renderTreeToggle={(icon, rowData, expanded) => {
// // if (rowData.labelName === '手机') {
// // return <i className="icon icon-spin icon-spinner" />;
// // }
// // return icon;
// return <i className="icon icon-spin icon-spinner" />;
// }}
/>
</div>
);
}
}
ReactDOM.render(<TreeTable />, document.getElementById('container'));
Mac
Chrome 98
choerodon-ui: 1.5.1