bee-table/demo/demolist/Demo1404.js

94 lines
2.3 KiB
JavaScript
Raw Normal View History

2019-04-18 10:50:38 +08:00
/**
* @title 层级树大数据场景
* @parent 无限滚动 Infinite-scroll
* @description
*/
2018-12-18 13:59:48 +08:00
import React, { Component } from "react";
2019-03-19 11:13:10 +08:00
import {Tooltip} from "tinper-bee";
2019-03-20 17:44:05 +08:00
2018-12-18 13:59:48 +08:00
import Table from "../../src";
import BigData from "../../src/lib/bigData";
const BigDataTable = BigData(Table);
2019-01-22 11:05:42 +08:00
const columns = [
{
title:'序号',
dataIndex:'index',
2019-03-20 17:44:05 +08:00
width:'150',
2019-03-19 19:37:59 +08:00
key:'index',
2019-01-22 11:05:42 +08:00
render:(text,record,index)=>{
return index
2019-02-26 17:06:52 +08:00
}
2019-01-22 11:05:42 +08:00
},
{
title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
render: (text, record, index) => {
return (
<Tooltip inverse overlay={text}>
<span tootip={text} style={{
display: "inline-block",
width: "80px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
verticalAlign: "middle",
}}>{text}</span>
</Tooltip>
);
}
},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
2019-02-26 17:06:52 +08:00
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
2019-01-22 11:05:42 +08:00
];
2018-12-18 13:59:48 +08:00
2019-03-20 17:44:05 +08:00
const data = [ ...new Array(1000) ].map((e, i) => {
2018-12-18 15:42:31 +08:00
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
if(i%3==0){
2018-12-20 18:07:30 +08:00
rs.b = '女';
2019-03-20 17:44:05 +08:00
rs.children = [];
for(let subi=0;subi<3;subi++){
rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});
}
}else{
rs.children = [];
for(let subi=0;subi<3;subi++){
rs.children.push({a: i +subi + 'asub', b: i +subi + 'bsub', c: i + subi +'csub', d: i + subi +'dsub', key: i+ `${subi} sub`});
}
2018-12-18 15:42:31 +08:00
}
return rs;
2018-12-18 13:59:48 +08:00
})
2019-03-20 17:44:05 +08:00
class Demo34 extends Component {
2019-01-22 11:05:42 +08:00
2018-12-18 13:59:48 +08:00
constructor(props) {
super(props);
this.state = {
data: data,
2019-01-22 11:05:42 +08:00
selectedRowIndex: 0
2018-12-18 13:59:48 +08:00
}
}
2019-03-20 17:44:05 +08:00
onExpandedRowsChange = (params)=>{
console.log(params);
}
onExpand = (expandKeys)=>{
console.log('expand---'+expandKeys);
}
2018-12-18 13:59:48 +08:00
render() {
return (
<BigDataTable
2019-01-22 11:05:42 +08:00
columns={columns}
2018-12-18 13:59:48 +08:00
data={data}
2019-03-20 17:44:05 +08:00
parentNodeId='parent'
2018-12-22 12:04:03 +08:00
scroll={{y:300}}
onExpand={this.onExpand}
2018-12-18 13:59:48 +08:00
onRowClick={(record, index, indent) => {
console.log('currentIndex--'+index);
2018-12-18 13:59:48 +08:00
}}
/>
2019-02-19 09:34:38 +08:00
2018-12-18 13:59:48 +08:00
);
}
}
export default Demo34;