大数据在expanded场景下的使用

CHANGELOG.md

@@ -1,3 +1,8 @@
+<a name="1.6.16"></a>
+## [1.6.16](https://github.com/tinper-bee/bee-table/compare/v1.6.15...v1.6.16) (2018-12-17)
+
+
+
 <a name="1.6.15"></a>
 ## [1.6.15](https://github.com/tinper-bee/bee-table/compare/v1.6.14...v1.6.15) (2018-12-15)
 
@@ -164,7 +169,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-18)
+## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)
 
 
 

build/lib/bigData.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports["default"] = bigData;
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require("prop-types");
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+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; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
+
+var propTypes = {
+  rowsInView: _propTypes2["default"].number.isRequired
+};
+var defaultProps = {
+  data: undefined,
+  height: 40, //默认行高
+  rowsInView: 25
+};
+
+function bigData(Table) {
+  return function (_Component) {
+    _inherits(BigData, _Component);
+
+    function BigData(props) {
+      _classCallCheck(this, BigData);
+
+      var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+
+      _this.state = {
+        currentIndex: 0,
+        scrollLeft: 0,
+        scrollTop: 0
+      };
+
+      _this.cachedRowHeight = [];
+      _this.lastScrollTop = 0;
+      return _this;
+    }
+    /**
+     *获取数据区高度 
+     * 
+     * 
+    **/
+
+    BigData.prototype.getContentHeight = function getContentHeight() {
+      if (!this.props.data) return 0;
+      return this.getSumHeight(0, this.props.data.length);
+    };
+
+    BigData.prototype.getSumHeight = function getSumHeight(start, end) {
+      var rowHeight = this.props.rowHeight;
+
+      var height = 0;
+      for (var i = start; i < end; i++) {
+        height += this.cachedRowHeight[i] || rowHeight;
+      }
+      return height;
+    };
+
+    BigData.prototype.getData = function getData() {};
+
+    BigData.prototype.render = function render() {
+      return _react2["default"].createElement(Table, _extends({}, this.props, { data: this.getData }));
+    };
+
+    return BigData;
+  }(_react.Component);
+  BigData.defaultProps = defaultProps;
+  BigData.propTypes = propTypes;
+}
+module.exports = exports["default"];

demo/demolist/Demo30.js

@@ -37,7 +37,7 @@ const columns = [
       );
     }
   },
-  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 200},
+  { id: "123", title: "性别", dataIndex: "b", key: "b", width: 60},
   { title: "年龄", dataIndex: "c", key: "c", width: 200 },
   {
     title: "操作",
@@ -63,7 +63,11 @@ const columns = [
 ];
 
 const data = [ ...new Array(10000) ].map((e, i) => {
-    return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
+    const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
+    if(i%3==0){
+        rs.b = '我的性别lalallalalal我的性别lalallalalal我的性别lalallalalal：女';
+    }
+    return rs;
    })
 
 

demo/demolist/Demo31.js

@@ -58,11 +58,10 @@ const innerColumns = [
   
 ];
 
-const data16 = [
-  { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
-  { a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
-  { a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
-];
+const data16 = [ ...new Array(10000) ].map((e, i) => {
+    return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
+   })
+
 
 
 class Demo31 extends Component {
@@ -98,7 +97,8 @@ class Demo31 extends Component {
         })
       }else{
         new_obj[record.key] = [
-          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" }
+          { a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
+          { a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
         ]
         this.setState({
           data_obj:new_obj

package.json

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

src/Table.js

@@ -499,6 +499,7 @@ class Table extends Component {
       )
     }
     const lazyCurrentIndex =  props.lazyLoad && props.lazyLoad.currentIndex ?props.lazyLoad.currentIndex :0;
+    let expandedContentHeight = 0;
     for (let i = 0; i < data.length; i++) {
       const record = data[i];
       const key = this.getRowKey(record, i);
@@ -507,6 +508,7 @@ class Table extends Component {
       let expandedRowContent;
       if (expandedRowRender && isRowExpanded) {
         expandedRowContent = expandedRowRender(record, i, indent);
+        expandedContentHeight = parseInt(expandedRowContent.props.style?expandedRowContent.props.style.height:0);
       }
       //只有当使用expandedRowRender参数的时候才去识别isHiddenExpandIcon（隐藏行展开的icon）
       if (expandedRowRender && typeof props.haveExpandIcon == 'function') {
@@ -576,6 +578,7 @@ class Table extends Component {
           store={this.store}
           fixed={fixed}
           lazyCurrentIndex={lazyCurrentIndex}
+          expandedContentHeight={expandedContentHeight}
         />
       );
       this.treeRowIndex++;

src/TableRow.js

@@ -78,9 +78,9 @@ class TableRow extends Component{
 
 
   setRowHeight() {
-    const { setRowHeight } = this.props
+    const { setRowHeight , expandedContentHeight} = this.props
     if (!setRowHeight || !this.element) return
-    setRowHeight(this.element.clientHeight + this.expandHeight, this.props.index)
+    setRowHeight(this.element.clientHeight + expandedContentHeight, this.props.index)
   }
 
   onRowClick(event) {