增加树表大数据场景

This commit is contained in:
wanghaoo 2019-01-05 00:09:35 +08:00
commit 222a55981e
19 changed files with 199 additions and 102 deletions

View File

@ -1,10 +1,15 @@
<a name="1.6.20"></a>
## [1.6.20](https://github.com/tinper-bee/bee-table/compare/v1.6.19...v1.6.20) (2018-12-26)
<a name="1.6.22"></a>
## [1.6.22](https://github.com/tinper-bee/bee-table/compare/v1.6.21...v1.6.22) (2018-12-29)
### Bug Fixes
* **keydown:** keydown ([5de9829](https://github.com/tinper-bee/bee-table/commit/5de9829))
<a name="1.6.19"></a>
## [1.6.19](https://github.com/tinper-bee/bee-table/compare/v1.6.18...v1.6.19) (2018-12-26)
<a name="1.6.21"></a>
## [1.6.21](https://github.com/tinper-bee/bee-table/compare/v1.6.18...v1.6.21) (2018-12-28)
@ -184,7 +189,7 @@
<a name="1.5.1"></a>
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18)
@ -469,7 +474,12 @@
<a name="1.2.9"></a>
## [1.2.9](https://github.com/tinper-bee/bee-table/compare/v1.2.7...v1.2.9) (2018-07-16)
## [1.2.9](https://github.com/tinper-bee/bee-table/compare/v1.2.8...v1.2.9) (2018-07-16)
<a name="1.2.8"></a>
## [1.2.8](https://github.com/tinper-bee/bee-table/compare/v1.2.7...v1.2.8) (2018-07-06)

View File

@ -109,7 +109,14 @@ class Demo extends Component {
| onFilterClear | 清除过滤条件的回调函数,回调参数为清空的字段 | function | (field) => ()
| headerScroll | 表头下是否显示滚动条 | bool| false
| syncHover | 是否同步Hover状态到左侧Checkbox关闭此功能有助于提升性能 | bool| true
| onKeyTab | tab快捷键可以处理默认选中第一条数据 | function| -
| onKeyUp | up快捷键可以处理table的上一条数据 | function| -
| onKeyDown | up快捷键可以处理table的下一条数据 | function| -
| onTableKeyDown | 触发table的快捷键 | function| -
| tabIndex | 设置焦点顺序 | number | 0
| loadBuffer | 使用BigData高阶组件实现大数据加载时上下加载的缓存 | number| 5
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
*注意: data参数中的key值必需否则会导致部分功能出现问题建议使用唯一的值如id*
@ -139,6 +146,15 @@ class Demo extends Component {
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
| filterInputNumberOptions | 数值框接收的props具体属性参考bee-input-number | object | null
## 快捷键API
| 快捷键 | 快捷键说明 | 类型 | 默认值 |
| --- | :--- | --- |--- |
| onKeyTab | tab快捷键可以处理默认选中第一条数据 | function| -
| onKeyUp | ↑(上箭) 快捷键可以处理table的上一条数据 | function| -
| onKeyDown | ↓(下箭)快捷键可以处理table的下一条数据 | function| -
| onTableKeyDown | 触发table的所有快捷键 | function| -
| tabIndex | 设置焦点顺序 | number | 0
## 如何引用

BIN
build.zip Normal file

Binary file not shown.

View File

@ -259,7 +259,8 @@
line-height: 16px;
border: 1px solid #e9e9e9;
user-select: none;
background: #fff; }
background: #fff;
margin-right: 10px; }
.u-table-row-spaced, .u-table-expanded-row-spaced {
visibility: hidden; }
.u-table-row-spaced:after, .u-table-expanded-row-spaced:after {

View File

@ -97,8 +97,8 @@ var propTypes = {
filterDelay: _propTypes2["default"].number,
onFilterChange: _propTypes2["default"].func,
onFilterClear: _propTypes2["default"].func,
syncHover: _propTypes2["default"].bool
syncHover: _propTypes2["default"].bool,
tabIndex: _propTypes2["default"].string
};
var defaultProps = {
@ -139,7 +139,8 @@ var defaultProps = {
columns: [],
minColumnWidth: 80,
locale: {},
syncHover: true
syncHover: true,
tabIndex: '0'
};
var Table = function (_Component) {
@ -181,7 +182,7 @@ var Table = function (_Component) {
//down
_this.props.onKeyDown && _this.props.onKeyDown();
}
_this.props.onTabkeKeyDown && _this.props.onTabkeKeyDown();
_this.props.onTableKeyDown && _this.props.onTableKeyDown();
// else if(event.altKey && event.keyCode === 38){
// this.props.onKeyMove&&this.props.onKeyMove('up');
// }else if(event.altKey && event.keyCode === 40){
@ -245,10 +246,6 @@ var Table = function (_Component) {
_utils.EventUtil.addHandler(document, 'keydown', this.onKeyDown);
};
Table.prototype.componentWillUnmount = function componentWillUnmount() {
_utils.EventUtil.removeHandler(document, 'keydown', this.onKeyDown);
};
Table.prototype.componentDidMount = function componentDidMount() {
setTimeout(this.resetScrollY, 300);
//含有纵向滚动条
@ -314,6 +311,7 @@ var Table = function (_Component) {
};
Table.prototype.componentWillUnmount = function componentWillUnmount() {
_utils.EventUtil.removeHandler(document, 'keydown', this.onKeyDown);
if (this.resizeEvent) {
this.resizeEvent.remove();
}
@ -1197,7 +1195,7 @@ var Table = function (_Component) {
'div',
{ className: className, style: props.style, ref: function ref(el) {
return _this6.contentTable = el;
}, tabIndex: '0' },
}, tabIndex: props.tabIndex ? props.tabIndex : '0' },
this.getTitle(),
_react2["default"].createElement(
'div',

View File

@ -8,17 +8,32 @@ import React, { Component } from "react";
import Button from "bee-button";
import Tooltip from "bee-tooltip";
import Table from "../../src";
import Checkbox from 'bee-checkbox';
const columns = [
{
title: "",
dataIndex: "d",
fixed: "left",
key: "d",
width:80,
render(text, record, index) {
return (
<div style={{ position: 'relative' }} title={text} >
<Checkbox />
</div>
);
}
},
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
];
const data = [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
{ a: "令狐冲", b: "男", c: 41,d:'操作', key: "1" },
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67,d:'操作', key: "2" },
{ a: "郭靖", b: "男", c: 25,d:'操作', key: "3" }
];
class Demo33 extends Component {
@ -63,7 +78,7 @@ class Demo33 extends Component {
})
}
onTabkeKeyDown = ()=>{
onTableKeyDown = ()=>{
let {selectedRowIndex} = this.state;
console.log(" ----onTabkeKeyDown--- ",selectedRowIndex);
}
@ -89,7 +104,8 @@ class Demo33 extends Component {
onKeyTab={this.onKeyTab}
onKeyUp={this.onKeyUp}
onKeyDown={this.onKeyDown}
onTabkeKeyDown={this.onTabkeKeyDown}
onTableKeyDown={this.onTableKeyDown}
scroll={{ x: "110%", y: 140 }}
/> </div>
);
}

File diff suppressed because one or more lines are too long

3
dist/demo.css vendored
View File

@ -8523,7 +8523,8 @@ ul {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: #fff; }
background: #fff;
margin-right: 10px; }
.u-table-row-spaced, .u-table-expanded-row-spaced {
visibility: hidden; }
.u-table-row-spaced:after, .u-table-expanded-row-spaced:after {

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

106
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -55,10 +55,6 @@ import 'bee-table/build/Table.css';
| headerScroll | 表头下是否显示滚动条 | bool| false
| sort | 排序的属性 | object| { mode:'single'//单列排序, backSource:false //默认是前端排序值为true为后端排序 } mode:multiple-多列排序
| syncHover | 是否同步Hover状态到左侧Checkbox关闭此功能有助于提升性能 | bool| true
| onKeyTab | tab快捷键可以处理默认选中第一条数据 | function| -
| onKeyUp | up快捷键可以处理table的上一条数据 | function| -
| onKeyDown | up快捷键可以处理table的下一条数据 | function| -
| onTabkeKeyDown | 触发table的快捷键 | function| -
| loadBuffer | 使用BigData高阶组件实现大数据加载时上下加载的缓存 | number| 5
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
@ -93,6 +89,17 @@ import 'bee-table/build/Table.css';
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
| filterInputNumberOptions | 数值框接收的props具体属性参考bee-input-number | object | null
## 快捷键API
| 快捷键 | 快捷键说明 | 类型 | 默认值 |
| --- | :--- | --- |--- |
| onKeyTab | tab快捷键可以处理默认选中第一条数据 | function| -
| onKeyUp | ↑(上箭) 快捷键可以处理table的上一条数据 | function| -
| onKeyDown | ↓(下箭)快捷键可以处理table的下一条数据 | function| -
| onTableKeyDown | 触发table的所有快捷键 | function| -
| tabIndex | 设置焦点顺序 | number | 0
{% include "mixin.md"%}

View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "1.6.20",
"version": "1.6.24",
"description": "Table ui component for react",
"keywords": [
"react",

View File

@ -49,7 +49,7 @@ const propTypes = {
onFilterChange: PropTypes.func,
onFilterClear: PropTypes.func,
syncHover: PropTypes.bool,
tabIndex:PropTypes.string,
};
const defaultProps = {
@ -81,7 +81,8 @@ const defaultProps = {
locale:{},
syncHover: true,
setRowHeight:()=>{},
setRowParentIndex:()=>{}
setRowParentIndex:()=>{},
tabIndex:'0'
};
class Table extends Component {
@ -142,10 +143,6 @@ class Table extends Component {
EventUtil.addHandler(document,'keydown',this.onKeyDown);
}
componentWillUnmount() {
EventUtil.removeHandler(document,'keydown',this.onKeyDown);
}
componentDidMount() {
setTimeout(this.resetScrollY, 300);
//含有纵向滚动条
@ -197,6 +194,8 @@ class Table extends Component {
this.firstDid = true;//避免重复update
}
console.log('this.scrollTop**********',this.scrollTop);
}
componentDidUpdate() {
@ -219,6 +218,7 @@ class Table extends Component {
}
componentWillUnmount() {
EventUtil.removeHandler(document,'keydown',this.onKeyDown);
if (this.resizeEvent) {
this.resizeEvent.remove();
}
@ -578,8 +578,10 @@ class Table extends Component {
if(paramRootIndex<0){
paramRootIndex = i+lazyParentIndex;
}
// console.log('rootIndex',rootIndex,'index',fixedIndex,'fixedIndex',fixedIndex,'paramRootIndex',paramRootIndex,'key',record.key);
let index = i;
if(rootIndex ==-1){
index = i+lazyParentIndex
}
rst.push(
<TableRow
indent={indent}
@ -589,7 +591,7 @@ class Table extends Component {
record={record}
expandIconAsCell={expandIconAsCell}
onDestroy={this.onRowDestroy}
index={i+lazyParentIndex}
index={index}
visible={visible}
expandRowByClick={expandRowByClick}
onExpand={this.onExpanded}
@ -609,7 +611,6 @@ class Table extends Component {
ref={rowRef}
store={this.store}
fixed={fixed}
lazyCurrentIndex={lazyCurrentIndex}
expandedContentHeight={expandedContentHeight}
setRowHeight={props.setRowHeight}
setRowParentIndex={props.setRowParentIndex}
@ -1030,7 +1031,6 @@ class Table extends Component {
// Remember last scrollLeft for scroll direction detecting.
this.lastScrollLeft = e.target.scrollLeft;
}
handleRowHover(isHover, key) {
@ -1053,7 +1053,7 @@ class Table extends Component {
}else if(event.keyCode === 40){//down
this.props.onKeyDown&&this.props.onKeyDown();
}
this.props.onTabkeKeyDown&&this.props.onTabkeKeyDown();
this.props.onTableKeyDown&&this.props.onTableKeyDown();
// else if(event.altKey && event.keyCode === 38){
// this.props.onKeyMove&&this.props.onKeyMove('up');
// }else if(event.altKey && event.keyCode === 40){
@ -1091,7 +1091,7 @@ class Table extends Component {
}
return (
<div className={className} style={props.style} ref={el => this.contentTable = el} tabIndex="0" >
<div className={className} style={props.style} ref={el => this.contentTable = el} tabIndex={props.tabIndex?props.tabIndex:'0'} >
{this.getTitle()}
<div className={`${clsPrefix}-content`}>

View File

@ -185,6 +185,7 @@ $checkbox-height:16px;
border: 1px solid $table-border-color;
user-select: none;
background: #fff;
margin-right: 10px;
}
&-spaced {
visibility: hidden;
@ -725,7 +726,5 @@ $checkbox-height:16px;
height: $checkbox-height;
line-height: $checkbox-height;
}
.u-checkbox .u-checkbox-label:after,.u-checkbox .u-checkbox-label::before {
}

View File

@ -539,7 +539,7 @@ class TableHeader extends Component {
return (
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
{rows.map((row, index) => (
<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
<tr style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
{row.map((da, columIndex, arr) => {
let thHover = da.drgHover
? ` ${clsPrefix}-thead th-drag-hover`

View File

@ -79,9 +79,10 @@ class TableRow extends Component{
componentDidUpdate(prevProps) {
if(this.props.treeType){
this.setRowParentIndex();
if(this.props.fixedIndex!== prevProps.fixedIndex){
this.setRowHeight()
}
// if(this.props.fixedIndex!== prevProps.fixedIndex){
// this.setRowHeight()
// }
}else if(this.props.index !== prevProps.index){
this.setRowHeight()
}
@ -97,7 +98,7 @@ class TableRow extends Component{
setRowHeight() {
const { setRowHeight , expandedContentHeight=0,lazyCurrentIndex=0,fixed,fixedIndex} = this.props
const { setRowHeight , expandedContentHeight=0,fixed,fixedIndex} = this.props
if (!setRowHeight || !this.element || fixed) return
setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex)
}
@ -161,7 +162,7 @@ class TableRow extends Component{
const {
clsPrefix, columns, record, height, visible, index,
expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,lazyCurrentIndex=0
expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,
} = this.props;
let showSum = false;
let { className } = this.props;

View File

@ -69,7 +69,6 @@ export default function bigData(Table) {
});
}
// console.log("***data********++++++++++++",this.cachedRowParentIndex);
}
getRowKey(record, index) {
@ -126,10 +125,22 @@ export default function bigData(Table) {
getSumHeight(start, end) {
const { height } = this.props;
const rowHeight = height ? height : defaultHeight;
let sumHeight = 0;
let rowHeight = height ? height : defaultHeight;
let sumHeight = 0,currentKey,currentRowHeight=rowHeight;
for (let i = start; i < end; i++) {
sumHeight += this.cachedRowHeight[i] || rowHeight;
if(this.cachedRowHeight[i] == undefined){
if(this.treeType){
currentKey = this.keys[i];
currentRowHeight = 0;
if(this.firstLevelKey.indexOf(currentKey)>=0 || this.expandChildRowKeys.indexOf(currentKey)>=0){
currentRowHeight = rowHeight;
}
}
sumHeight += currentRowHeight;
}else{
sumHeight += this.cachedRowHeight[i]
}
}
return sumHeight;
}
@ -185,7 +196,6 @@ export default function bigData(Table) {
let temp = nextScrollTop;
let currentKey;
while (temp >0) {
// console.log('获取index-----',this.cachedRowHeight[index]);
let currentRowHeight = this.cachedRowHeight[index];
if(currentRowHeight === undefined){
if(this.treeType){
@ -204,10 +214,9 @@ export default function bigData(Table) {
index += 1;
}
}
// console.log('while循环获取index次数-----',index);
console.log('currentIndex****',index);
const isOrder = index - currentIndex > 0 ? true : false;
if (index < 0) index = 0;
console.log("currentIndex****" + index);
//如果之前的索引和下一次的不一样则重置索引和滚动的位置
if (currentIndex !== index) {
_this.currentIndex = index;
@ -220,7 +229,6 @@ export default function bigData(Table) {
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
while (rowsHeight < viewHeight && tempIndex<this.cachedRowHeight.length) {
// console.log("rowsHeight < viewHeight",tempIndex,rowsHeight,viewHeight,this.cachedRowHeight);
if(this.cachedRowHeight[tempIndex]){
rowsHeight += this.cachedRowHeight[tempIndex];
if(treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex ||!treeType){
@ -231,7 +239,6 @@ export default function bigData(Table) {
tempIndex++;
}
// console.log("rowsHeight < viewHeight循环次数",tempIndex-index);
if(treeType){
const treeIndex = index
index = _this.cachedRowParentIndex[treeIndex];
@ -349,21 +356,30 @@ export default function bigData(Table) {
}
}
render() {
const { data } = this.props;
const { scrollTop } = this;
const { endIndex, startIndex } = this;
const lazyLoad = {
preHeight: this.getSumHeight(0, startIndex),
sufHeight: this.getSumHeight(endIndex, data.length),
startIndex: startIndex,
startParentIndex:startIndex,//为树状节点做准备
};
if(this.treeType){
const preSubCounts = this.cachedRowParentIndex.findIndex(item=>{ return item==startIndex })
const sufSubCounts = this.cachedRowParentIndex.findIndex(item=>{ return item==endIndex })
lazyLoad.preHeight = this.getSumHeight(0,preSubCounts>-1?preSubCounts:0);
lazyLoad.sufHeight = this.getSumHeight(sufSubCounts+1>0?sufSubCounts+1:this.cachedRowParentIndex.length,this.cachedRowParentIndex.length);
if(preSubCounts>0){
lazyLoad.startIndex = preSubCounts;
}
}else{
lazyLoad.preHeight = this.getSumHeight(0, startIndex)
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length)
}
console.log('*******ScrollTop*****'+scrollTop);
return (
<Table
{...this.props}