publish 1.6.26

build/Table.css

@@ -375,9 +375,7 @@
       zoom: 1;
       line-height: 4px;
       height: 4px;
-      color: #999;
+      color: #999; }
-      -webkit-transition: all 0.3s;
-      transition: all 0.3s; }
     .u-table-thead th:hover .bee-table-column-sorter {
       display: inline-block; }
   .u-table-thead .th-drag {

build/Table.js

@@ -140,6 +140,8 @@ var defaultProps = {
   minColumnWidth: 80,
   locale: {},
   syncHover: true,
+  setRowHeight: function setRowHeight() {},
+  setRowParentIndex: function setRowParentIndex() {},
   tabIndex: '0'
 };
 
@@ -175,11 +177,7 @@ var Table = function (_Component) {
 
     _this.onKeyDown = function (e) {
       var event = _utils.Event.getEvent(e);
-      // event.preventDefault&&event.preventDefault();
       // event.preventDefault?event.preventDefault():event.returnValue = false;
-      // if (event.keyCode === 9){//tab
-      //   // this.props.onKeyTab&&this.props.onKeyTab();
-      // }else
       if (event.keyCode === 38) {
         //up
         event.preventDefault && event.preventDefault();
@@ -190,11 +188,6 @@ var Table = function (_Component) {
         _this.props.onKeyDown && _this.props.onKeyDown();
       }
       _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){
-      //   this.props.onKeyMove&&this.props.onKeyMove('down');
-      // }
     };
 
     var expandedRowKeys = [];
@@ -296,7 +289,10 @@ var Table = function (_Component) {
     }
     if (!nextProps.originWidth) {
       this.computeTableWidth();
+      this.firstDid = true; //避免重复update
     }
+
+    console.log('this.scrollTop**********', this.scrollTop);
   };
 
   Table.prototype.componentDidUpdate = function componentDidUpdate() {
@@ -305,8 +301,9 @@ var Table = function (_Component) {
       this.syncFixedTableRowHeight();
     }
     //适应模态框中表格、以及父容器宽度变化的情况
-    if (typeof this.props.scroll.x !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth) {
+    if (typeof this.props.scroll.x !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth && this.firstDid) {
       this.computeTableWidth();
+      this.firstDid = false; //避免重复update
     }
     if (this.scrollTop) {
       this.refs.fixedColumnsBodyLeft && (this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
@@ -613,8 +610,23 @@ var Table = function (_Component) {
       dragborderKey: this.props.dragborderKey
     });
   };
+  /**
+   *
+   *
+   * @param {*} data
+   * @param {*} visible
+   * @param {*} indent 层级
+   * @param {*} columns
+   * @param {*} fixed
+   * @param {number} [rootIndex=-1] 祖级节点
+   * @returns
+   * @memberof Table
+   */
+
 
   Table.prototype.getRowsByData = function getRowsByData(data, visible, indent, columns, fixed) {
+    var rootIndex = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : -1;
+
     var props = this.props;
     var childrenColumnName = props.childrenColumnName;
     var expandedRowRender = props.expandedRowRender;
@@ -635,11 +647,11 @@ var Table = function (_Component) {
 
     var expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
     var expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
-    if (props.lazyLoad && props.lazyLoad.preHeight) {
+    if (props.lazyLoad && props.lazyLoad.preHeight && indent == 0) {
       rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.preHeight, columns: [], className: '', store: this.store, visible: true }));
     }
     var lazyCurrentIndex = props.lazyLoad && props.lazyLoad.startIndex ? props.lazyLoad.startIndex : 0;
-
+    var lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ? props.lazyLoad.startParentIndex : 0;
     for (var i = 0; i < data.length; i++) {
       var record = data[i];
       var key = this.getRowKey(record, i);
@@ -649,7 +661,7 @@ var Table = function (_Component) {
       var expandedContentHeight = 0;
       if (expandedRowRender && isRowExpanded) {
         expandedRowContent = expandedRowRender(record, i, indent);
-        expandedContentHeight = parseInt(expandedRowContent.props.style && expandedRowContent.props.style.height ? expandedRowContent.props.style.height : 0);
+        expandedContentHeight = parseInt(expandedRowContent.props && expandedRowContent.props.style && expandedRowContent.props.style.height ? expandedRowContent.props.style.height : 0);
       }
       //只有当使用expandedRowRender参数的时候才去识别isHiddenExpandIcon（隐藏行展开的icon）
       if (expandedRowRender && typeof props.haveExpandIcon == 'function') {
@@ -661,6 +673,7 @@ var Table = function (_Component) {
       if (this.columnManager.isAnyColumnsFixed()) {
         onHoverProps.onHover = this.handleRowHover;
       }
+      //fixedIndex一般是跟index是一个值的，只有是树结构时，会讲子节点的值也累计上
       var fixedIndex = i;
       //判断是否是tree结构
       if (this.treeType) {
@@ -687,6 +700,15 @@ var Table = function (_Component) {
         className = className + ' sumrow';
       }
 
+      var paramRootIndex = rootIndex;
+      //小于0说明为第一层节点，她的子孙节点要保存自己的根节点
+      if (paramRootIndex < 0) {
+        paramRootIndex = i + lazyParentIndex;
+      }
+      var index = i;
+      if (rootIndex == -1) {
+        index = i + lazyParentIndex;
+      }
       rst.push(_react2["default"].createElement(_TableRow2["default"], _extends({
         indent: indent,
         indentSize: props.indentSize,
@@ -695,7 +717,7 @@ var Table = function (_Component) {
         record: record,
         expandIconAsCell: expandIconAsCell,
         onDestroy: this.onRowDestroy,
-        index: fixedIndex + lazyCurrentIndex,
+        index: index,
         visible: visible,
         expandRowByClick: expandRowByClick,
         onExpand: this.onExpanded,
@@ -715,9 +737,13 @@ var Table = function (_Component) {
         ref: rowRef,
         store: this.store,
         fixed: fixed,
-        lazyCurrentIndex: lazyCurrentIndex,
         expandedContentHeight: expandedContentHeight,
-        setRowHeight: props.setRowHeight
+        setRowHeight: props.setRowHeight,
+        setRowParentIndex: props.setRowParentIndex,
+        treeType: childrenColumn || this.treeType ? true : false,
+        fixedIndex: fixedIndex + lazyCurrentIndex,
+        rootIndex: rootIndex
+
       })));
       this.treeRowIndex++;
       var subVisible = visible && isRowExpanded;
@@ -727,11 +753,11 @@ var Table = function (_Component) {
       }
       if (childrenColumn) {
         this.treeType = true; //证明是tree表形式visible = {true}
-        rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1, columns, fixed));
+        rst = rst.concat(this.getRowsByData(childrenColumn, subVisible, indent + 1, columns, fixed, paramRootIndex));
       }
     }
 
-    if (props.lazyLoad && props.lazyLoad.sufHeight) {
+    if (props.lazyLoad && props.lazyLoad.sufHeight && indent == 0) {
       rst.push(_react2["default"].createElement(_TableRow2["default"], { height: props.lazyLoad.sufHeight, columns: [], className: '', store: this.store, visible: true }));
     }
     return rst;
@@ -1149,7 +1175,7 @@ var Table = function (_Component) {
       }
       this.lastScrollTop = e.target.scrollTop;
       if (handleScroll) {
-        (0, _utils.debounce)(handleScroll(this.lastScrollTop), 500);
+        (0, _utils.debounce)(handleScroll(this.lastScrollTop, this.treeType), 300);
       }
     }
 

build/TableHeader.js

@@ -623,7 +623,7 @@ var TableHeader = function (_Component) {
       rows.map(function (row, index) {
         return _react2["default"].createElement(
           "tr",
-          { key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
+          { style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
           row.map(function (da, columIndex, arr) {
             var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
             delete da.drgHover;

build/TableRow.js

@@ -64,7 +64,8 @@ var defaultProps = {
   expandRowByClick: false,
   onHover: function onHover() {},
 
-  className: ''
+  className: '',
+  setRowParentIndex: function setRowParentIndex() {}
 };
 
 var TableRow = function (_Component) {
@@ -107,7 +108,8 @@ var TableRow = function (_Component) {
 
     var _props = this.props,
         store = _props.store,
-        hoverKey = _props.hoverKey;
+        hoverKey = _props.hoverKey,
+        treeType = _props.treeType;
 
     this.unsubscribe = store.subscribe(function () {
       if (store.getState().currentHoverKey === hoverKey) {
@@ -118,10 +120,19 @@ var TableRow = function (_Component) {
     });
 
     this.setRowHeight();
+    if (treeType) {
+      this.setRowParentIndex();
+    }
   };
 
   TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (this.props.index !== prevProps.index) {
+    if (this.props.treeType) {
+      this.setRowParentIndex();
+      this.setRowHeight();
+      // if(this.props.fixedIndex!== prevProps.fixedIndex){
+      //   this.setRowHeight()
+      // }
+    } else if (this.props.index !== prevProps.index) {
       this.setRowHeight();
     }
   };
@@ -143,23 +154,33 @@ var TableRow = function (_Component) {
         setRowHeight = _props3.setRowHeight,
         _props3$expandedConte = _props3.expandedContentHeight,
         expandedContentHeight = _props3$expandedConte === undefined ? 0 : _props3$expandedConte,
-        _props3$lazyCurrentIn = _props3.lazyCurrentIndex,
+        fixed = _props3.fixed,
-        lazyCurrentIndex = _props3$lazyCurrentIn === undefined ? 0 : _props3$lazyCurrentIn,
+        fixedIndex = _props3.fixedIndex;
-        fixed = _props3.fixed;
 
     if (!setRowHeight || !this.element || fixed) return;
-    setRowHeight(this.element.clientHeight + expandedContentHeight, this.props.index);
+    setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex);
+  };
+
+  TableRow.prototype.setRowParentIndex = function setRowParentIndex() {
+    var _props4 = this.props,
+        index = _props4.index,
+        setRowParentIndex = _props4.setRowParentIndex,
+        fixedIndex = _props4.fixedIndex,
+        rootIndex = _props4.rootIndex;
+    // console.log('rootIndex',rootIndex<0?index:rootIndex,'index',fixedIndex);
+
+    setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex);
   };
 
   TableRow.prototype.onRowClick = function onRowClick(event) {
-    var _props4 = this.props,
+    var _props5 = this.props,
-        record = _props4.record,
+        record = _props5.record,
-        index = _props4.index,
+        index = _props5.index,
-        onRowClick = _props4.onRowClick,
+        onRowClick = _props5.onRowClick,
-        expandable = _props4.expandable,
+        expandable = _props5.expandable,
-        expandRowByClick = _props4.expandRowByClick,
+        expandRowByClick = _props5.expandRowByClick,
-        expanded = _props4.expanded,
+        expanded = _props5.expanded,
-        onExpand = _props4.onExpand;
+        onExpand = _props5.onExpand;
 
     if (expandable && expandRowByClick) {
       onExpand(!expanded, record, index, event);
@@ -170,52 +191,50 @@ var TableRow = function (_Component) {
   };
 
   TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) {
-    var _props5 = this.props,
+    var _props6 = this.props,
-        record = _props5.record,
+        record = _props6.record,
-        index = _props5.index,
+        index = _props6.index,
-        onRowDoubleClick = _props5.onRowDoubleClick;
+        onRowDoubleClick = _props6.onRowDoubleClick;
 
     this.clear();
     onRowDoubleClick(record, index, event);
   };
 
   TableRow.prototype.onMouseEnter = function onMouseEnter() {
-    var _props6 = this.props,
+    var _props7 = this.props,
-        onHover = _props6.onHover,
+        onHover = _props7.onHover,
-        hoverKey = _props6.hoverKey;
+        hoverKey = _props7.hoverKey;
 
     onHover(true, hoverKey);
   };
 
   TableRow.prototype.onMouseLeave = function onMouseLeave() {
-    var _props7 = this.props,
+    var _props8 = this.props,
-        onHover = _props7.onHover,
+        onHover = _props8.onHover,
-        hoverKey = _props7.hoverKey;
+        hoverKey = _props8.hoverKey;
 
     onHover(false, hoverKey);
   };
 
   TableRow.prototype.render = function render() {
-    var _props8 = this.props,
+    var _props9 = this.props,
-        clsPrefix = _props8.clsPrefix,
+        clsPrefix = _props9.clsPrefix,
-        columns = _props8.columns,
+        columns = _props9.columns,
-        record = _props8.record,
+        record = _props9.record,
-        height = _props8.height,
+        height = _props9.height,
-        visible = _props8.visible,
+        visible = _props9.visible,
-        index = _props8.index,
+        index = _props9.index,
-        expandIconColumnIndex = _props8.expandIconColumnIndex,
+        expandIconColumnIndex = _props9.expandIconColumnIndex,
-        expandIconAsCell = _props8.expandIconAsCell,
+        expandIconAsCell = _props9.expandIconAsCell,
-        expanded = _props8.expanded,
+        expanded = _props9.expanded,
-        expandRowByClick = _props8.expandRowByClick,
+        expandRowByClick = _props9.expandRowByClick,
-        expandable = _props8.expandable,
+        expandable = _props9.expandable,
-        onExpand = _props8.onExpand,
+        onExpand = _props9.onExpand,
-        needIndentSpaced = _props8.needIndentSpaced,
+        needIndentSpaced = _props9.needIndentSpaced,
-        indent = _props8.indent,
+        indent = _props9.indent,
-        indentSize = _props8.indentSize,
+        indentSize = _props9.indentSize,
-        isHiddenExpandIcon = _props8.isHiddenExpandIcon,
+        isHiddenExpandIcon = _props9.isHiddenExpandIcon,
-        fixed = _props8.fixed,
+        fixed = _props9.fixed;
-        _props8$lazyCurrentIn = _props8.lazyCurrentIndex,
-        lazyCurrentIndex = _props8$lazyCurrentIn === undefined ? 0 : _props8$lazyCurrentIn;
 
     var showSum = false;
     var className = this.props.className;

build/lib/bigData.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,14 +8,16 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 exports["default"] = bigData;
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
+var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _utils = require("../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
@@ -28,7 +30,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 var defaultHeight = 40;
 var rowDiff = 3; //行差值
-
+var treeTypeIndex = 0;
 function bigData(Table) {
   var _class, _temp, _initialiseProps;
 
@@ -53,13 +55,93 @@ function bigData(Table) {
       _this2.currentIndex = 0;
       _this2.loadCount = props.loadBuffer ? _this2.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据
       _this2.cachedRowHeight = []; //缓存每行的高度
+      _this2.cachedRowParentIndex = [];
+      _this2.expandChildRowKeys = [];
+      _this2.firstLevelKey = [];
+      _this2.keys = [];
       _this2.lastScrollTop = 0;
       _this2.currentScrollTop = 0;
       _this2.startIndex = _this2.currentIndex; //数据开始位置
       _this2.endIndex = _this2.currentIndex + _this2.loadCount; //数据结束位置
       _this2.setRowHeight = _this2.setRowHeight.bind(_this2);
+      _this2.setRowParentIndex = _this2.setRowParentIndex.bind(_this2);
       return _this2;
     }
+
+    BigData.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+      if (nextProps.scroll.y !== this.props.scroll.y) {
+        var scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
+        this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
+        this.loadCount = props.loadBuffer ? this.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据
+        this.currentIndex = 0;
+        this.startIndex = this.currentIndex; //数据开始位置
+        this.endIndex = this.currentIndex + this.loadCount; //数据结束位置
+      }
+    };
+
+    BigData.prototype.componentDidMount = function componentDidMount() {
+      var _this3 = this;
+
+      var isTreeType = this.checkIsTreeType();
+      if (isTreeType) {
+        var data = this.props.data;
+
+        data.forEach(function (item, index) {
+          _this3.firstLevelKey[index] = _this3.getRowKey(item, index);
+          _this3.cachedRowParentIndex[treeTypeIndex] = index;
+          //保存所有的keys跟小标对应起来
+          _this3.keys[treeTypeIndex] = _this3.getRowKey(item, index);
+          treeTypeIndex++;
+          if (item.children) {
+            _this3.getData(item.children, index);
+          }
+        });
+      }
+    };
+
+    BigData.prototype.getRowKey = function getRowKey(record, index) {
+      var rowKey = this.props.rowKey;
+      var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
+      (0, _utils.warningOnce)(key !== undefined, 'Each record in table should have a unique `key` prop,' + 'or set `rowKey` to an unique primary key.');
+      return key;
+    };
+    /**
+     *判断是否是树形结构
+     *
+     */
+
+
+    BigData.prototype.checkIsTreeType = function checkIsTreeType() {
+      var data = this.props.data;
+
+      var rs = false;
+      //取前三十个看看是否有children属性，有则为树形结构
+      for (var i = 0; i < 30; i++) {
+        if (data[i].children) {
+          rs = true;
+          break;
+        }
+      }
+      return rs;
+    };
+
+    BigData.prototype.getData = function getData(data, parentIndex) {
+      var _this4 = this;
+
+      data.forEach(function (subItem, subIndex) {
+        _this4.cachedRowParentIndex[treeTypeIndex] = parentIndex;
+        _this4.keys[treeTypeIndex] = _this4.getRowKey(subItem, subIndex);
+        treeTypeIndex++;
+        if (subItem.children) {
+          _this4.getData(subItem.children, parentIndex);
+        }
+      });
+    };
+
+    BigData.prototype.componentWillUnmount = function componentWillUnmount() {
+      this.cachedRowHeight = [];
+      this.cachedRowParentIndex = [];
+    };
     /**
      *获取数据区高度
      *
@@ -76,15 +158,31 @@ function bigData(Table) {
       var height = this.props.height;
 
       var rowHeight = height ? height : defaultHeight;
-      var sumHeight = 0;
+      var sumHeight = 0,
+          currentKey = void 0,
+          currentRowHeight = rowHeight;
+
       for (var 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;
     };
+
     /**
      *@description  根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
      *@param 最新一次滚动的scrollTop
+     *@param treeType是否是树状表
      */
 
 
@@ -92,6 +190,42 @@ function bigData(Table) {
       this.cachedRowHeight[index] = height;
     };
 
+    BigData.prototype.setRowParentIndex = function setRowParentIndex(parentIndex, index) {}
+    // this.cachedRowParentIndex[index] = parentIndex; 
+
+    /**
+     *
+     *根据当前行号获取该行的父节点行号
+     * @param {*} currentIndex 当前行号
+     */
+    ;
+
+    BigData.prototype.getParentIndex = function getParentIndex(targetIndex) {
+      var data = this.props.data;
+
+      var parentIndex = -1;
+      parentIndex = this.getIndex(data, -1, targetIndex);
+      if (parentIndex < 0) {
+        //小于0说明没有展开的子节点
+        parentIndex = targetIndex;
+      }
+      return parentIndex;
+    };
+
+    BigData.prototype.getIndex = function getIndex(data, index, targetIndex) {
+      var parentIndex = index;
+      for (var i = 0; i < data.length; i++) {
+        index++;
+        if (targetIndex <= index) {
+          break;
+        }
+        if (data[i].children) {
+          this.getIndex(data[i].children, index, targetIndex);
+        }
+      }
+      return parentIndex;
+    };
+
     BigData.prototype.render = function render() {
       var data = this.props.data;
       var scrollTop = this.scrollTop;
@@ -99,16 +233,36 @@ function bigData(Table) {
           startIndex = this.startIndex;
 
       var lazyLoad = {
-        preHeight: this.getSumHeight(0, startIndex),
+        startIndex: startIndex,
-        sufHeight: this.getSumHeight(endIndex, data.length),
+        startParentIndex: startIndex //为树状节点做准备
-        startIndex: startIndex
       };
+      if (this.treeType) {
+        var preSubCounts = this.cachedRowParentIndex.findIndex(function (item) {
+          return item == startIndex;
+        });
+        var sufSubCounts = this.cachedRowParentIndex.findIndex(function (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 _react2["default"].createElement(Table, _extends({}, this.props, {
         data: data.slice(startIndex, endIndex),
         lazyLoad: lazyLoad,
         handleScroll: this.handleScroll,
         scrollTop: scrollTop,
-        setRowHeight: this.setRowHeight
+        setRowHeight: this.setRowHeight,
+        setRowParentIndex: this.setRowParentIndex,
+        onExpand: this.onExpand,
+        onExpandedRowsChange: this.onExpandedRowsChange
         //   className={'lazy-table'}
       }));
     };
@@ -116,14 +270,19 @@ function bigData(Table) {
     return BigData;
   }(_react.Component), _class.defaultProps = {
     data: [],
-    loadBuffer: 5
+    loadBuffer: 5,
+    rowKey: 'key'
   }, _class.propTypes = {
     loadBuffer: _propTypes2["default"].number
   }, _initialiseProps = function _initialiseProps() {
-    var _this3 = this;
+    var _this5 = this;
 
-    this.handleScroll = function (nextScrollTop) {
+    this.handleScroll = function (nextScrollTop, treeType) {
-      var _this = _this3;
+      //树表逻辑
+      // 关键点是动态的获取startIndex和endIndex
+      // 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
+      // 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值，
+      var _this = _this5;
       var _this$props = _this.props,
           data = _this$props.data,
           height = _this$props.height,
@@ -142,6 +301,7 @@ function bigData(Table) {
       var needRender = _this.state.needRender;
 
       var viewHeight = parseInt(scroll.y);
+      _this.treeType = treeType;
       // let index = currentIndex;//记录下次当前位置
       // let temp = currentIndex ?nextScrollTop - currentScrollTop:nextScrollTop;
 
@@ -168,40 +328,84 @@ function bigData(Table) {
       // }
       var index = 0;
       var temp = nextScrollTop;
+      var currentKey = void 0;
       while (temp > 0) {
-        temp -= _this3.cachedRowHeight[index] || rowHeight;
+        var currentRowHeight = _this5.cachedRowHeight[index];
+        if (currentRowHeight === undefined) {
+          if (_this5.treeType) {
+            currentKey = _this5.keys[index];
+            currentRowHeight = 0;
+            if (_this5.firstLevelKey.indexOf(currentKey) >= 0 || _this5.expandChildRowKeys.indexOf(currentKey) >= 0) {
+              currentRowHeight = rowHeight;
+            }
+          } else {
+            currentRowHeight = rowHeight;
+          }
+        }
+        temp -= currentRowHeight;
         if (temp > 0) {
           index += 1;
         }
       }
+      console.log('currentIndex****', index);
       var isOrder = index - currentIndex > 0 ? true : false;
       if (index < 0) index = 0;
-      console.log('currentIndex****' + index);
       //如果之前的索引和下一次的不一样则重置索引和滚动的位置
       if (currentIndex !== index) {
         _this.currentIndex = index;
         _this.scrollTop = nextScrollTop;
         var rowsInView = 0; //可视区域显示多少行
         var rowsHeight = 0; //可视区域内容高度
-
+        var tempIndex = index;
         //如果可视区域中需要展示的数据已经在缓存中则不重现render。
         if (viewHeight) {
           //有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
-          while (rowsHeight < viewHeight && _this3.cachedRowHeight[rowsInView + index]) {
+
-            rowsHeight += _this3.cachedRowHeight[rowsInView + index];
+          while (rowsHeight < viewHeight && tempIndex < _this5.cachedRowHeight.length) {
+            if (_this5.cachedRowHeight[tempIndex]) {
+              rowsHeight += _this5.cachedRowHeight[tempIndex];
+              if (treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex || !treeType) {
                 rowsInView++;
               }
+            }
+            tempIndex++;
+          }
+          if (treeType) {
+            var treeIndex = index;
+            index = _this.cachedRowParentIndex[treeIndex];
+            if (index === undefined) {
+              console.log('index is undefined********' + treeIndex);
+              index = _this5.getParentIndex(treeIndex);
+              console.log("getParentIndex****" + index);
+            }
+          }
+          console.log('parentIndex*********', index);
           // 如果rowsInView 小于 缓存的数据则重新render
           // 向下滚动 下临界值超出缓存的endIndex则重新渲染
           if (rowsInView + index > endIndex - rowDiff && isOrder) {
 
-            _this3.startIndex = index - loadBuffer;
+            startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0;
-            endIndex = _this3.startIndex + loadCount;
+            endIndex = startIndex + loadCount;
+            //树状结构则根据当前的节点重新计算startIndex和endIndex
+            // if(treeType){
+            //     const currentParentIndex =  _this.cachedRowParentIndex[index];
+            //     startIndex = currentParentIndex - loadBuffer>0?currentParentIndex - loadBuffer:0;
+            //     endIndex = startIndex + loadCount;
+            //     // console.log(endIndex,"endIndex的parentIndex",parentEndIndex);
+            //     // endIndex = parentEndIndex +1
+            // }else{
+            //   startIndex = index - loadBuffer>0?index - loadBuffer:0;
+            //   endIndex = startIndex + loadCount;
+            // }
             if (endIndex > data.length) {
               endIndex = data.length;
             }
-            _this3.endIndex = endIndex;
+            if (startIndex !== _this5.startIndex || endIndex !== _this5.endIndex) {
-            _this3.setState({ needRender: !needRender });
+              _this5.startIndex = startIndex;
+              _this5.endIndex = endIndex;
+              _this5.setState({ needRender: !needRender });
+            }
+            console.log("===================", "**index**" + index, " **startIndex**" + _this5.startIndex, "**endIndex**" + _this5.endIndex);
           }
           // 向上滚动，当前的index是否已经加载（currentIndex），若干上临界值小于startIndex则重新渲染
           if (!isOrder && index < startIndex + rowDiff) {
@@ -209,14 +413,33 @@ function bigData(Table) {
             if (startIndex < 0) {
               startIndex = 0;
             }
-            _this3.startIndex = startIndex;
+            if (startIndex !== _this5.startIndex || endIndex !== _this5.endIndex) {
-            _this3.endIndex = _this3.startIndex + loadCount;
+              _this5.startIndex = startIndex;
-            _this3.setState({ needRender: !needRender });
+              _this5.endIndex = _this5.startIndex + loadCount;
+              _this5.setState({ needRender: !needRender });
+            }
+            console.log("**index**" + index, "**startIndex**" + _this5.startIndex, "**endIndex**" + _this5.endIndex);
           }
         }
-        console.log('**index**' + index, "**startIndex**" + _this3.startIndex, "**endIndex**" + _this3.endIndex);
+      }
+    };
+
+    this.onExpand = function (expandState, record) {
+      var _this = _this5;
+      // 展开
+      if (expandState) {
+        record.children && record.children.forEach(function (item, index) {
+          _this.expandChildRowKeys.push(_this.getRowKey(item, index));
+        });
+      } else {
+        // 收起
+        record.children && record.children.forEach(function (item, index) {
+          _this.expandChildRowKeys.splice(_this.expandChildRowKeys.findIndex(function (fitem) {
+            return fitem.key === item.key;
+          }), 1);
+        });
       }
     };
   }, _temp;
 }
-module.exports = exports['default'];
+module.exports = exports["default"];

demo/demolist/Demo25.js

@@ -204,11 +204,11 @@ class Demo25 extends Component {
                 columns={columns}
                 data={dataList} 
                 getSelectedDataFunc={this.getSelectedDataFunc}
-                bordered
+                
                 checkMinSize={7}
                 draggable={true}
                 multiSelect={{type: "checkbox"}}
-                scroll={{x:"130%", y: 100}}
+                scroll={{x:true, y: 100}}
                 selectedRow={this.selectedRow}
                 // scroll={{x:this.getCloumnsScroll(columns), y: 150}}
                 />

demo/demolist/Demo34.js

@@ -0,0 +1,115 @@
+/**
+*
+* @title 树状结构的大数据场景
+* 【Tooltip】
+* @description
+*/
+
+import React, { Component } from "react";
+import Tooltip from "bee-tooltip";
+import Table from "../../src";
+import BigData from "../../src/lib/bigData";
+const BigDataTable = BigData(Table);
+const columns = [
+    {
+        title:'序号',
+        dataIndex:'index',
+        width:'150',
+        render:(text,record,index)=>{
+            return index
+        }
+    },
+    {
+    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},
+  { title: "年龄", dataIndex: "c", key: "c", width: 200 },
+  {
+    title: "操作",
+    dataIndex: "d",
+    key: "d",
+    fixed:'right',
+    render(text, record, index) {
+      return (
+        <div style={{ position: 'relative' }} title={text} >
+          <a
+            href="javascript:;"
+            tooltip={text}
+            onClick={() => {
+              alert('这是第' + index + '列，内容为:' + text);
+            }}
+          >
+            一些操作
+              </a>
+        </div>
+      );
+    }
+  }
+];
+
+const data = [ ...new Array(1000) ].map((e, i) => {
+    const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
+    if(i%3==0){
+        rs.b = '女';
+        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`});
+        }
+    }
+    return rs;
+   })
+
+
+class Demo30 extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: data,
+      selectedRowIndex: 0
+    }
+  }
+  onExpandedRowsChange = (params)=>{
+    console.log(params);
+  }
+  onExpand = (expandKeys)=>{
+    console.log('expand---'+expandKeys);
+  }
+  render() {
+    return (
+        <BigDataTable
+          columns={columns}
+          data={data}
+          parentNodeId='parent'
+          scroll={{y:300}}
+          height={40}
+          onRowClick={(record, index, indent) => {
+            console.log('currentIndex--'+index);
+          }}
+        />
+
+     
+    );
+  }
+}
+
+export default Demo30;

dist/demo.css

@@ -8691,8 +8691,7 @@ ul {
       zoom: 1;
       line-height: 4px;
       height: 4px;
-      color: #999;
+      color: #999; }
-      transition: all 0.3s; }
     .u-table-thead th:hover .bee-table-column-sorter {
       display: inline-block; }
   .u-table-thead .th-drag {

package.json

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

src/Table.js

@@ -80,6 +80,8 @@ const defaultProps = {
   minColumnWidth: 80,
   locale:{},
   syncHover: true,
+  setRowHeight:()=>{},
+  setRowParentIndex:()=>{},
   tabIndex:'0'
 };
 
@@ -187,8 +189,11 @@ class Table extends Component {
     }
     if (!nextProps.originWidth) {
       this.computeTableWidth();
+      this.firstDid = true;//避免重复update
     }
 
+    console.log('this.scrollTop**********',this.scrollTop);
+
   }
 
   componentDidUpdate() {
@@ -197,8 +202,9 @@ class Table extends Component {
       this.syncFixedTableRowHeight();
     }
     //适应模态框中表格、以及父容器宽度变化的情况
-    if (typeof (this.props.scroll.x) !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth) {
+    if (typeof (this.props.scroll.x) !== 'number' && this.contentTable.getBoundingClientRect().width !== this.contentDomWidth && this.firstDid) {
       this.computeTableWidth();
+      this.firstDid = false;//避免重复update
     }
     if(this.scrollTop){
       this.refs.fixedColumnsBodyLeft && ( this.refs.fixedColumnsBodyLeft.scrollTop = this.scrollTop);
@@ -480,8 +486,19 @@ class Table extends Component {
       />
     );
   }
-
+  /**
-  getRowsByData(data, visible, indent, columns, fixed) {
+   *
+   *
+   * @param {*} data
+   * @param {*} visible
+   * @param {*} indent 层级
+   * @param {*} columns
+   * @param {*} fixed
+   * @param {number} [rootIndex=-1] 祖级节点
+   * @returns
+   * @memberof Table
+   */
+  getRowsByData(data, visible, indent, columns, fixed,rootIndex=-1) {
     const props = this.props;
     const childrenColumnName = props.childrenColumnName;
     const expandedRowRender = props.expandedRowRender;
@@ -499,13 +516,13 @@ class Table extends Component {
 
     const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
     const expandIconColumnIndex = fixed !== 'right' ? props.expandIconColumnIndex : -1;
-    if(props.lazyLoad && props.lazyLoad.preHeight){
+    if(props.lazyLoad && props.lazyLoad.preHeight && indent == 0){
       rst.push(
         <TableRow height={props.lazyLoad.preHeight} columns={[]} className='' store={this.store} visible = {true}/>
       )
     }
     const lazyCurrentIndex =  props.lazyLoad && props.lazyLoad.startIndex ?props.lazyLoad.startIndex :0;
-    
+    const lazyParentIndex = props.lazyLoad && props.lazyLoad.startParentIndex ?props.lazyLoad.startParentIndex :0;
     for (let i = 0; i < data.length; i++) {
       const record = data[i];
       const key = this.getRowKey(record, i);
@@ -515,7 +532,7 @@ class Table extends Component {
       let expandedContentHeight = 0;
       if (expandedRowRender && isRowExpanded) {
         expandedRowContent = expandedRowRender(record, i, indent);
-        expandedContentHeight = parseInt(expandedRowContent.props.style && expandedRowContent.props.style.height?expandedRowContent.props.style.height:0);
+        expandedContentHeight = parseInt(expandedRowContent.props && expandedRowContent.props.style && expandedRowContent.props.style.height?expandedRowContent.props.style.height:0);
       }
       //只有当使用expandedRowRender参数的时候才去识别isHiddenExpandIcon（隐藏行展开的icon）
       if (expandedRowRender && typeof props.haveExpandIcon == 'function') {
@@ -527,6 +544,7 @@ class Table extends Component {
       if (this.columnManager.isAnyColumnsFixed()) {
         onHoverProps.onHover = this.handleRowHover;
       }
+      //fixedIndex一般是跟index是一个值的，只有是树结构时，会讲子节点的值也累计上
       let fixedIndex = i;
       //判断是否是tree结构
       if (this.treeType) {
@@ -554,7 +572,15 @@ class Table extends Component {
         className = className + ' sumrow';
       }
       
-
+      let paramRootIndex = rootIndex;
+      //小于0说明为第一层节点，她的子孙节点要保存自己的根节点
+      if(paramRootIndex<0){
+        paramRootIndex = i+lazyParentIndex;
+      }
+      let index = i;
+      if(rootIndex ==-1){
+        index = i+lazyParentIndex
+      }
       rst.push(
         <TableRow
           indent={indent}
@@ -564,7 +590,7 @@ class Table extends Component {
           record={record}
           expandIconAsCell={expandIconAsCell}
           onDestroy={this.onRowDestroy}
-          index={fixedIndex+lazyCurrentIndex}
+          index={index}
           visible={visible}
           expandRowByClick={expandRowByClick}
           onExpand={this.onExpanded}
@@ -584,9 +610,13 @@ class Table extends Component {
           ref={rowRef}
           store={this.store}
           fixed={fixed}
-          lazyCurrentIndex={lazyCurrentIndex}
           expandedContentHeight={expandedContentHeight}
           setRowHeight={props.setRowHeight}
+          setRowParentIndex={props.setRowParentIndex}
+          treeType={childrenColumn||this.treeType?true:false}
+          fixedIndex={fixedIndex+lazyCurrentIndex}
+          rootIndex = {rootIndex}
+
         />
       );
       this.treeRowIndex++;
@@ -600,12 +630,12 @@ class Table extends Component {
       if (childrenColumn) {
         this.treeType = true;//证明是tree表形式visible = {true}
         rst = rst.concat(this.getRowsByData(
-          childrenColumn, subVisible, indent + 1, columns, fixed
+          childrenColumn, subVisible, indent + 1, columns, fixed,paramRootIndex
         ));
       }
     }
 
-    if(props.lazyLoad && props.lazyLoad.sufHeight){
+    if(props.lazyLoad && props.lazyLoad.sufHeight && indent == 0){
       rst.push(
         <TableRow height={props.lazyLoad.sufHeight} columns={[]} className='' store={this.store} visible = {true}/>
       )
@@ -993,15 +1023,13 @@ class Table extends Component {
       this.lastScrollTop = e.target.scrollTop;
       if(handleScroll){
         debounce(
-          handleScroll(this.lastScrollTop)
+        handleScroll(this.lastScrollTop,this.treeType),
-        ,500);
+        300)
-        
       }
     }
     
     // Remember last scrollLeft for scroll direction detecting.
     this.lastScrollLeft = e.target.scrollLeft;
-   
   }
 
   handleRowHover(isHover, key) {
@@ -1021,11 +1049,7 @@ class Table extends Component {
 
   onKeyDown=(e)=>{
     let event = Event.getEvent(e); 
-    // event.preventDefault&&event.preventDefault();
     // event.preventDefault?event.preventDefault():event.returnValue = false;
-    // if (event.keyCode === 9){//tab
-    //   // this.props.onKeyTab&&this.props.onKeyTab();
-    // }else
     if(event.keyCode === 38){//up
       event.preventDefault&&event.preventDefault();
       this.props.onKeyUp&&this.props.onKeyUp();
@@ -1034,11 +1058,6 @@ class Table extends Component {
       this.props.onKeyDown&&this.props.onKeyDown();
     }
     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){
-    //   this.props.onKeyMove&&this.props.onKeyMove('down');
-    // }
   }
 
   render() {

src/Table.scss

@@ -361,8 +361,8 @@ $checkbox-height:16px;
         line-height: 4px;
         height: 4px;
         color: #999;
-        -webkit-transition: all 0.3s;
+        // -webkit-transition: all 0.3s;
-        transition: all 0.3s;
+        // transition: all 0.3s;
       }
        &:hover{
         .bee-table-column-sorter {
@@ -726,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  {
 
-}
 

src/TableHeader.js

@@ -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`

src/TableRow.js

@@ -38,7 +38,8 @@ const defaultProps = {
     expandIconColumnIndex: 0,
     expandRowByClick: false,
     onHover() {},
-    className:''
+    className:'',
+    setRowParentIndex:()=>{}
 };
 
 class TableRow extends Component{
@@ -57,7 +58,7 @@ class TableRow extends Component{
 
 
   componentDidMount() {
-    const { store, hoverKey } = this.props;
+    const { store, hoverKey,treeType } = this.props;
     this.unsubscribe = store.subscribe(() => {
       if (store.getState().currentHoverKey === hoverKey) {
         this.setState({ hovered: true });
@@ -67,13 +68,25 @@ class TableRow extends Component{
     });
 
     this.setRowHeight()
+    if(treeType){
+      this.setRowParentIndex();
+    }
+  
+    
   }
 
 
   componentDidUpdate(prevProps) {
-    if (this.props.index !== prevProps.index) {
+    if(this.props.treeType){
+      this.setRowParentIndex();
+      this.setRowHeight()
+      // if(this.props.fixedIndex!== prevProps.fixedIndex){
+      //   this.setRowHeight()
+      // }
+    }else if(this.props.index !== prevProps.index){
       this.setRowHeight()
     }
+  
   }
   componentWillUnmount() {
     const { record, onDestroy, index } = this.props;
@@ -85,9 +98,15 @@ class TableRow extends Component{
 
 
   setRowHeight() {
-    const { setRowHeight , expandedContentHeight=0,lazyCurrentIndex=0,fixed} = this.props
+    const { setRowHeight , expandedContentHeight=0,fixed,fixedIndex} = this.props
     if (!setRowHeight || !this.element || fixed) return
-    setRowHeight(this.element.clientHeight + expandedContentHeight, this.props.index)
+    setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex)
+  }
+  setRowParentIndex(){
+    const {index,setRowParentIndex,fixedIndex,rootIndex} = this.props;
+    // console.log('rootIndex',rootIndex<0?index:rootIndex,'index',fixedIndex);
+    setRowParentIndex(rootIndex<0?index:rootIndex,fixedIndex);
+
   }
   
   onRowClick(event) {
@@ -143,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;

src/lib/bigData.js

@@ -1,37 +1,117 @@
 import React, { Component } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-
+import { warningOnce } from '../utils';
 const defaultHeight = 40;
-const rowDiff = 3;//行差值
+const rowDiff = 3; //行差值
-
+let treeTypeIndex = 0;
 export default function bigData(Table) {
   return class BigData extends Component {
-    
     static defaultProps = {
       data: [],
-        loadBuffer:5
+      loadBuffer: 5,
+      rowKey: 'key',
     };
     static propTypes = {
-      loadBuffer: PropTypes.number,
+      loadBuffer: PropTypes.number
-    }
+    };
     constructor(props) {
       super(props);
       this.state = {
         scrollLeft: 0,
         scrollTop: 0
       };
-      const rowHeight = this.props.height?this.props.height:defaultHeight
+      const rowHeight = this.props.height ? this.props.height : defaultHeight;
       //默认显示25条，rowsInView根据定高算的。在非固定高下，这个只是一个大概的值。
       const scrollY = this.props.scroll.y ? parseInt(this.props.scroll.y) : 0;
-      this.rowsInView =  scrollY ?Math.ceil(scrollY/rowHeight):20 ;
+      this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
       this.currentIndex = 0;
-      this.loadCount = props.loadBuffer? this.rowsInView + props.loadBuffer*2:26;//一次加载多少数据
+      this.loadCount = props.loadBuffer
-      this.cachedRowHeight = [];//缓存每行的高度
+        ? this.rowsInView + props.loadBuffer * 2
+        : 26; //一次加载多少数据
+      this.cachedRowHeight = []; //缓存每行的高度
+      this.cachedRowParentIndex=[];
+      this.expandChildRowKeys=[];
+      this.firstLevelKey=[];
+      this.keys=[];
       this.lastScrollTop = 0;
       this.currentScrollTop = 0;
-      this.startIndex = this.currentIndex;//数据开始位置
+      this.startIndex = this.currentIndex; //数据开始位置
-      this.endIndex = this.currentIndex + this.loadCount//数据结束位置 
+      this.endIndex = this.currentIndex + this.loadCount; //数据结束位置
       this.setRowHeight = this.setRowHeight.bind(this);
+      this.setRowParentIndex = this.setRowParentIndex.bind(this);
+    }
+    componentWillReceiveProps(nextProps){
+        if(nextProps.scroll.y !== this.props.scroll.y){
+            const scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
+            this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
+            this.loadCount = props.loadBuffer
+              ? this.rowsInView + props.loadBuffer * 2
+              : 26; //一次加载多少数据
+              this.currentIndex = 0;
+            this.startIndex = this.currentIndex; //数据开始位置
+            this.endIndex = this.currentIndex + this.loadCount; //数据结束位置
+        }
+    }
+
+    componentDidMount(){
+      const isTreeType = this.checkIsTreeType();
+      if(isTreeType){
+        const {data}  = this.props;
+        data.forEach((item,index)=>{
+          this.firstLevelKey[index] = this.getRowKey(item,index);
+          this.cachedRowParentIndex[treeTypeIndex] = index;
+          //保存所有的keys跟小标对应起来
+          this.keys[treeTypeIndex] = this.getRowKey(item,index);
+          treeTypeIndex++;
+          if(item.children){
+            this.getData(item.children,index);
+          }
+        });
+      }
+     
+    }
+
+    getRowKey(record, index) {
+      const rowKey = this.props.rowKey;
+      const key = (typeof rowKey === 'function') ?
+        rowKey(record, index) : record[rowKey];
+      warningOnce(
+        key !== undefined,
+        'Each record in table should have a unique `key` prop,' +
+        'or set `rowKey` to an unique primary key.'
+      );
+      return key;
+    }
+    /**
+     *判断是否是树形结构
+     *
+     */
+    checkIsTreeType(){
+      const {data} = this.props;
+      let rs = false;
+      //取前三十个看看是否有children属性，有则为树形结构
+      for(let i = 0 ;i<30;i++){
+        if(data[i].children){
+          rs = true;
+          break;
+        }
+      }
+      return rs;
+    }
+    getData(data,parentIndex){
+        data.forEach((subItem,subIndex)=>{
+          this.cachedRowParentIndex[treeTypeIndex] = parentIndex;
+          this.keys[treeTypeIndex] = this.getRowKey(subItem,subIndex);
+          treeTypeIndex++;
+          if(subItem.children){
+            this.getData(subItem.children,parentIndex);
+
+          }
+        })
+    }
+    componentWillUnmount(){
+      this.cachedRowHeight = [];
+      this.cachedRowParentIndex = [];
     }
     /**
      *获取数据区高度
@@ -45,25 +125,49 @@ export default function bigData(Table) {
 
     getSumHeight(start, end) {
       const { height } = this.props;
-      const rowHeight = height?height:defaultHeight;
+      let rowHeight = height ? height : defaultHeight;
-      let sumHeight = 0;
+      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;
     }
-/**
+    
+    /**
      *@description  根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
      *@param 最新一次滚动的scrollTop
+     *@param treeType是否是树状表
      */
-handleScroll = (nextScrollTop)=> {
+    handleScroll = (nextScrollTop, treeType) => {
+      //树表逻辑
+      // 关键点是动态的获取startIndex和endIndex
+      // 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
+      // 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值，
       const _this = this;
-        const {data,height,scroll={},loadBuffer} = _this.props;
+      const { data, height, scroll = {}, loadBuffer } = _this.props;
-        const rowHeight = height?height:defaultHeight;
+      const rowHeight = height ? height : defaultHeight;
-        const {currentIndex = 0 ,loadCount,scrollTop,currentScrollTop} = _this;
+      const {
-        let {endIndex,startIndex} = _this;
+        currentIndex = 0,
-        const {needRender} = _this.state;
+        loadCount,
+        scrollTop,
+        currentScrollTop
+      } = _this;
+      let { endIndex, startIndex } = _this;
+      const { needRender } = _this.state;
       const viewHeight = parseInt(scroll.y);
+      _this.treeType = treeType;
       // let index = currentIndex;//记录下次当前位置
       // let temp = currentIndex ?nextScrollTop - currentScrollTop:nextScrollTop;
 
@@ -90,69 +194,192 @@ handleScroll = (nextScrollTop)=> {
       // }
       let index = 0;
       let temp = nextScrollTop;
-        while (temp > 0) {
+      let currentKey;
-          temp -= this.cachedRowHeight[index] || rowHeight
+      while (temp >0) {
-          if(temp > 0){
+        let currentRowHeight = this.cachedRowHeight[index];
-            index += 1
+        if(currentRowHeight === undefined){
+          if(this.treeType){
+            currentKey = this.keys[index];
+            currentRowHeight = 0;
+            if(this.firstLevelKey.indexOf(currentKey)>=0 || this.expandChildRowKeys.indexOf(currentKey)>=0){
+              currentRowHeight = rowHeight;
+            }
+          }else{
+            currentRowHeight = rowHeight;
+          }
+          
+        }
+        temp -= currentRowHeight;
+        if (temp > 0) {
+          index += 1;
         }
       }
-        const isOrder = index - currentIndex > 0 ?true:false;
+      console.log('currentIndex****',index);
-        if (index < 0) index = 0
+      const isOrder = index - currentIndex > 0 ? true : false;
-        console.log('currentIndex****'+index);
+      if (index < 0) index = 0;
       //如果之前的索引和下一次的不一样则重置索引和滚动的位置
-        if(currentIndex !== index){
+      if (currentIndex !== index) {
         _this.currentIndex = index;
         _this.scrollTop = nextScrollTop;
-            let rowsInView = 0 ; //可视区域显示多少行
+        let rowsInView = 0; //可视区域显示多少行
         let rowsHeight = 0; //可视区域内容高度
-
+        let tempIndex =  index;
         //如果可视区域中需要展示的数据已经在缓存中则不重现render。
-            if(viewHeight){
+        if (viewHeight) {
           //有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
-                while(rowsHeight < viewHeight && this.cachedRowHeight[rowsInView + index] ){
+          
-                    rowsHeight += this.cachedRowHeight[rowsInView + index];
+          while (rowsHeight < viewHeight && tempIndex<this.cachedRowHeight.length) {
+            if(this.cachedRowHeight[tempIndex]){
+                rowsHeight += this.cachedRowHeight[tempIndex];
+                if(treeType && _this.cachedRowParentIndex[tempIndex] !== tempIndex ||!treeType){
                   rowsInView++;
                 }
+                
+            }
+            tempIndex++;
+            
+          }
+          if(treeType){
+            const treeIndex = index
+            index = _this.cachedRowParentIndex[treeIndex];
+            if(index === undefined){
+              console.log('index is undefined********'+treeIndex);
+              index = this.getParentIndex(treeIndex);
+              console.log("getParentIndex****"+index);
+            }
+
+          }
+          console.log('parentIndex*********',index);
           // 如果rowsInView 小于 缓存的数据则重新render
           // 向下滚动 下临界值超出缓存的endIndex则重新渲染
-                if(rowsInView+index > endIndex - rowDiff && isOrder){
+          if (rowsInView + index > endIndex - rowDiff && isOrder) {
          
-                    this.startIndex = index - loadBuffer;
+              startIndex = index - loadBuffer>0?index - loadBuffer:0;
-                    endIndex = this.startIndex  + loadCount
+              endIndex = startIndex + loadCount;
-                    if(endIndex > data.length){
+            //树状结构则根据当前的节点重新计算startIndex和endIndex
-                        endIndex = data.length 
+            // if(treeType){
+            //     const currentParentIndex =  _this.cachedRowParentIndex[index];
+            //     startIndex = currentParentIndex - loadBuffer>0?currentParentIndex - loadBuffer:0;
+            //     endIndex = startIndex + loadCount;
+            //     // console.log(endIndex,"endIndex的parentIndex",parentEndIndex);
+            //     // endIndex = parentEndIndex +1
+            // }else{
+            //   startIndex = index - loadBuffer>0?index - loadBuffer:0;
+            //   endIndex = startIndex + loadCount;
+            // }
+            if (endIndex > data.length) {
+              endIndex = data.length;
             }
+            if(startIndex!==this.startIndex||endIndex!==this.endIndex){
+                this.startIndex = startIndex;
                 this.endIndex = endIndex;
-                    this.setState({needRender: !needRender });
+                this.setState({ needRender: !needRender });
+            }
+            console.log(
+              "===================",
+              "**index**" + index,
+              " **startIndex**" + this.startIndex,
+              "**endIndex**" + this.endIndex
+            );
           }
           // 向上滚动，当前的index是否已经加载（currentIndex），若干上临界值小于startIndex则重新渲染
-                if(!isOrder && index < startIndex + rowDiff){
+          if (!isOrder && index < startIndex + rowDiff) {
             startIndex = index - loadBuffer;
-                    if(startIndex<0){
+            if (startIndex < 0) {
               startIndex = 0;
             }
+            if(startIndex!==this.startIndex||endIndex!==this.endIndex){
                 this.startIndex = startIndex;
-                    this.endIndex = this.startIndex  + loadCount
+                this.endIndex = this.startIndex + loadCount;
-                    this.setState({needRender: !needRender });
+                this.setState({ needRender: !needRender });
             }
+            console.log(
+              "**index**" + index,
+              "**startIndex**" + this.startIndex,
+              "**endIndex**" + this.endIndex
+            );
           }
-            console.log('**index**'+index,"**startIndex**"+this.startIndex,"**endIndex**"+this.endIndex);
         }
       
       }
+    };
 
     setRowHeight(height, index) {
-        this.cachedRowHeight[index] = height
+      this.cachedRowHeight[index] = height;
+    }
+    setRowParentIndex(parentIndex,index){
+      // this.cachedRowParentIndex[index] = parentIndex; 
+    }
+    /**
+     *
+     *根据当前行号获取该行的父节点行号
+     * @param {*} currentIndex 当前行号
+     */
+    getParentIndex(targetIndex) {
+        const {data} = this.props;
+        let parentIndex = -1;
+        parentIndex = this.getIndex(data,-1,targetIndex);
+        if(parentIndex<0){//小于0说明没有展开的子节点
+            parentIndex = targetIndex;
+        }
+        return parentIndex;
+        
+    }
+    getIndex(data,index,targetIndex){
+        const parentIndex = index;
+        for(let i=0;i<data.length;i++){
+                index++;
+                if(targetIndex <=index){
+                    break;
+                }
+                if(data[i].children){
+                    this.getIndex(data[i].children,index,targetIndex);
+                }
+            
+        }
+        return parentIndex;
+    }
+
+
+    onExpand = (expandState,record)=>{
+      const _this = this;
+      // 展开
+      if(expandState){
+        record.children && record.children.forEach((item,index)=>{
+          _this.expandChildRowKeys.push( _this.getRowKey(item,index));
+        })
+      }else{
+      // 收起
+      record.children && record.children.forEach((item,index)=>{
+        _this.expandChildRowKeys.splice(_this.expandChildRowKeys.findIndex(fitem => fitem.key === item.key), 1)
+      })
+      }
     }
     render() {
+      
       const { data } = this.props;
       const { scrollTop } = this;
-      const {endIndex,startIndex} = this;
+      const { endIndex, startIndex } = this;
       const lazyLoad = {
-        preHeight: this.getSumHeight(0, startIndex),
+        startIndex: startIndex,
-        sufHeight: this.getSumHeight(endIndex , data.length),
+        startParentIndex:startIndex,//为树状节点做准备
-        startIndex: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}
@@ -161,10 +388,12 @@ handleScroll = (nextScrollTop)=> {
           handleScroll={this.handleScroll}
           scrollTop={scrollTop}
           setRowHeight={this.setRowHeight}
+          setRowParentIndex = {this.setRowParentIndex}
+          onExpand = {this.onExpand}
+          onExpandedRowsChange = {this.onExpandedRowsChange}
           //   className={'lazy-table'}
         />
       );
     }
   };
-
 }

src/lib/util.js

@@ -67,3 +67,6 @@ export function ObjectAssign(obj){
     }
     return tagObj;
   }
+
+
+