嵌套表格，扩展行支持高度自适应

build/Table.js

@@ -241,10 +241,8 @@ var Table = function (_Component) {
       var value1 = arr[index1];
       arr.splice(index1, 1);
       if (index1 < index2) {
-        console.log('向下拖');
         arr.splice(index2, 0, value1);
       } else {
-        console.log('向上拖');
         arr.splice(index2 + 1, 0, value1);
       }
 
@@ -318,7 +316,8 @@ var Table = function (_Component) {
       currentHoverKey: null,
       scrollPosition: 'left',
       fixedColumnsHeadRowsHeight: [],
-      fixedColumnsBodyRowsHeight: []
+      fixedColumnsBodyRowsHeight: [],
+      fixedColumnsExpandedRowsHeight: {} //扩展行的高度
     };
 
     _this.onExpandedRowsChange = _this.onExpandedRowsChange.bind(_this);
@@ -738,10 +737,10 @@ var Table = function (_Component) {
     } else if (fixed === 'right') {
       colCount = this.columnManager.rightLeafColumns().length;
     } else {
-      // colCount = this.columnManager.leafColumns().length;
       colCount = this.columnManager.centerColumns().length; //计算非固定列的个数，fix: 嵌套表格场景，右侧列断开的问题
     }
 
+    var expandedRowHeight = this.state.fixedColumnsExpandedRowsHeight[key] || 'auto';
     function contentContainer() {
       if (content && content.props && content.props.style) {
         return _react2["default"].createElement('div', { style: { height: content.props.style.height } });
@@ -781,7 +780,8 @@ var Table = function (_Component) {
       dragborderKey: this.props.dragborderKey,
       rowDraggAble: this.props.rowDraggAble,
       onDragRow: this.onDragRow,
-      onDragRowStart: this.onDragRowStart
+      onDragRowStart: this.onDragRowStart,
+      height: expandedRowHeight
     });
   };
 
@@ -1346,6 +1346,7 @@ var Table = function (_Component) {
         bodyDisplayInRow = _props8.bodyDisplayInRow;
 
     var headRows = this.headTable ? this.headTable.querySelectorAll('thead') : this.bodyTable.querySelectorAll('thead');
+    var expandedRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-expanded-row') || [];
     var bodyRows = this.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
     var leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll('.' + clsPrefix + '-row') || [];
     var rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll('.' + clsPrefix + '-row') || [];
@@ -1378,13 +1379,19 @@ var Table = function (_Component) {
         }
       }
     });
-
+    var fixedColumnsExpandedRowsHeight = {};
-    if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
+    expandedRows.length > 0 && expandedRows.forEach(function (row) {
+      var parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
+          height = row && row.getBoundingClientRect().height || 'auto';
+      fixedColumnsExpandedRowsHeight[parentRowKey] = height;
+    });
+    if ((0, _shallowequal2["default"])(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) && (0, _shallowequal2["default"])(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
       return;
     }
     this.setState({
       fixedColumnsHeadRowsHeight: fixedColumnsHeadRowsHeight,
-      fixedColumnsBodyRowsHeight: fixedColumnsBodyRowsHeight
+      fixedColumnsBodyRowsHeight: fixedColumnsBodyRowsHeight,
+      fixedColumnsExpandedRowsHeight: fixedColumnsExpandedRowsHeight
     });
   };
 

build/lib/multiSelect.js

@@ -347,6 +347,7 @@ function multiSelect(Table, Checkbox) {
     };
 
     this.onRowClick = function (record, index, event) {
+      if (record._disabled) return;
       var _props2 = _this2.props,
           autoCheckedByClickRows = _props2.autoCheckedByClickRows,
           onRowClick = _props2.onRowClick;

demo/demolist/Demo1101.js

@@ -52,14 +52,10 @@ class Demo16 extends Component {
     }
   }
   expandedRowRender = (record, index, indent) => {
-    let height = 42 * (this.state.data_obj[record.key].length+ 2);
-    
     return (
       <Table
         columns={columns17}
-        style={{height:height}}
         data={this.state.data_obj[record.key]}
-       
       />
     );
   };

package.json

@@ -54,7 +54,7 @@
   "bee-loading": "1.1.2",
   "bee-locale": "0.0.14",
   "bee-menus": "^2.0.6",
-  "bee-radio": "^2.0.14",
+  "bee-radio": "^2.0.16",
   "bee-select": "^2.0.11",
   "classnames": "^2.2.5",
   "component-classes": "^1.2.6",
@@ -92,4 +92,4 @@
   "reqwest": "^2.0.5",
   "tinper-bee": "latest"
  }
-}
+}

src/Table.js

@@ -131,6 +131,7 @@ class Table extends Component {
       scrollPosition: 'left',
       fixedColumnsHeadRowsHeight: [],
       fixedColumnsBodyRowsHeight: [],
+      fixedColumnsExpandedRowsHeight: {}, //扩展行的高度
     }
 
     this.onExpandedRowsChange = this.onExpandedRowsChange.bind(this);
@@ -542,10 +543,10 @@ class Table extends Component {
     } else if (fixed === 'right') {
       colCount = this.columnManager.rightLeafColumns().length;
     } else {
-      // colCount = this.columnManager.leafColumns().length;
       colCount = this.columnManager.centerColumns().length; //计算非固定列的个数，fix: 嵌套表格场景，右侧列断开的问题
     }
 
+    let expandedRowHeight = this.state.fixedColumnsExpandedRowsHeight[key] || 'auto';
     function contentContainer() {
       if (content && content.props && content.props.style) {
         return (
@@ -585,6 +586,7 @@ class Table extends Component {
         rowDraggAble={this.props.rowDraggAble}
         onDragRow={this.onDragRow}
         onDragRowStart={this.onDragRowStart}
+        height={expandedRowHeight}
       />
     );
   }
@@ -640,11 +642,9 @@ class Table extends Component {
     var value1 = arr[index1]
     arr.splice(index1,1)
     if(index1<index2){
-      console.log('向下拖')
       arr.splice(index2,0,value1)
 
     }else {
-      console.log('向上拖')
       arr.splice(index2+1,0,value1)
     }
 
@@ -1150,6 +1150,7 @@ class Table extends Component {
     const headRows = this.headTable ?
       this.headTable.querySelectorAll('thead') :
       this.bodyTable.querySelectorAll('thead');
+    const expandedRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-expanded-row`) || [];
     const bodyRows = this.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || [];
     const leftBodyRows = this.refs.fixedColumnsBodyLeft && this.refs.fixedColumnsBodyLeft.querySelectorAll(`.${clsPrefix}-row`) || [];
     const rightBodyRows = this.refs.fixedColumnsBodyRight && this.refs.fixedColumnsBodyRight.querySelectorAll(`.${clsPrefix}-row`) || [];
@@ -1180,18 +1181,23 @@ class Table extends Component {
             return row.getBoundingClientRect().height || 'auto'
           }
         }
-
-
       }
     );
-
+    const fixedColumnsExpandedRowsHeight = {};
+    expandedRows.length > 0 && expandedRows.forEach(row => {
+      let parentRowKey = row && row.previousSibling && row.previousSibling.getAttribute("data-row-key"),
+          height = row && row.getBoundingClientRect().height || 'auto';
+      fixedColumnsExpandedRowsHeight[parentRowKey] = height;
+    })
     if (shallowequal(this.state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
-      shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
+      shallowequal(this.state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight) &&
+      shallowequal(this.state.fixedColumnsExpandedRowsHeight, fixedColumnsExpandedRowsHeight)) {
       return;
     }
     this.setState({
       fixedColumnsHeadRowsHeight,
       fixedColumnsBodyRowsHeight,
+      fixedColumnsExpandedRowsHeight,
     });
   }
 

src/lib/multiSelect.js

@@ -288,6 +288,7 @@ export default function multiSelect(Table, Checkbox) {
 
     // 实现行点击时触发多选框勾选的需求
     onRowClick = (record,index,event) =>{
+      if(record._disabled) return;
       let { autoCheckedByClickRows, onRowClick } = this.props;
       if(autoCheckedByClickRows) {
         this.onCheckboxChange('',record, index)();