Merge branch 'master' of github.com:tinper-bee/bee-table

CHANGELOG.md

@@ -1,3 +1,23 @@
+<a name="1.4.39"></a>
+## [1.4.39](https://github.com/tinper-bee/bee-table/compare/v1.4.38...v1.4.39) (2018-11-13)
+
+
+
+<a name="1.4.38"></a>
+## [1.4.38](https://github.com/tinper-bee/bee-table/compare/v1.4.37...v1.4.38) (2018-11-12)
+
+
+
+<a name="1.4.37"></a>
+## [1.4.37](https://github.com/tinper-bee/bee-table/compare/v1.4.36...v1.4.37) (2018-11-08)
+
+
+
+<a name="1.4.36"></a>
+## [1.4.36](https://github.com/tinper-bee/bee-table/compare/v1.4.35...v1.4.36) (2018-11-08)
+
+
+
 <a name="1.4.35"></a>
 ## [1.4.35](https://github.com/tinper-bee/bee-table/compare/v1.4.34...v1.4.35) (2018-11-07)
 

build/FilterDropDown.js

@@ -127,7 +127,7 @@ var FilterDropDown = function (_Component) {
         );
         return _react2["default"].createElement(
             'div',
-            null,
+            { className: 'filter-btns' },
             isShowCondition == 'show' && _react2["default"].createElement(
                 _beeDropdown2["default"],
                 {

build/Table.css

@@ -320,7 +320,11 @@
   .u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {
     font-weight: normal; }
   .u-table-thead .filter-wrap {
-    display: flex; }
+    display: flex;
+    justify-content: center;
+    align-items: center; }
+    .u-table-thead .filter-wrap .filter-btns {
+      min-width: 58px; }
   .u-table-thead th {
     background: #f7f7f7;
     overflow: hidden;
@@ -408,8 +412,8 @@
     top: 3px;
     right: 18px;
     width: 22px;
-    height: 30px;
+    height: 25px;
-    line-height: 30px;
+    line-height: 25px;
     z-index: 2;
     background: #f7f7f7; }
     .u-table-filter-column-filter-iconi.uf {

build/Table.js

@@ -211,6 +211,10 @@ var Table = function (_Component) {
 
   Table.prototype.componentDidMount = function componentDidMount() {
     setTimeout(this.resetScrollY, 300);
+    //含有纵向滚动条
+    if (this.props.scroll.y) {
+      this.scrollbarWidth = (0, _utils.measureScrollbar)();
+    }
     //后续也放在recevice里面
     if (!this.props.originWidth) {
       this.computeTableWidth();
@@ -271,8 +275,12 @@ var Table = function (_Component) {
   };
 
   Table.prototype.computeTableWidth = function computeTableWidth() {
+
     //如果用户传了scroll.x按用户传的为主
     var setWidthParam = this.props.scroll.x;
+    var computeObj = this.columnManager.getColumnWidth(this.contentWidth);
+    var lastShowIndex = computeObj.lastShowIndex;
+    this.computeWidth = computeObj.computeWidth;
     if (typeof setWidthParam == 'number') {
       var numSetWidthParam = parseInt(setWidthParam);
       this.contentWidth = numSetWidthParam;
@@ -282,15 +290,18 @@ var Table = function (_Component) {
       this.contentDomWidth = this.contentTable.getBoundingClientRect().width; //表格容器宽度
 
       this.contentWidth = this.contentDomWidth; //默认与容器宽度一样
+      this.domWidthDiff = this.contentDomWidth - this.computeWidth;
       if (typeof setWidthParam == 'string' && setWidthParam.indexOf('%')) {
         this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100;
       }
     }
-    var computeObj = this.columnManager.getColumnWidth(this.contentWidth);
+
-    var lastShowIndex = computeObj.lastShowIndex;
-    this.computeWidth = computeObj.computeWidth;
     if (this.computeWidth < this.contentWidth) {
-      var contentWidthDiff = this.contentWidth - this.computeWidth;
+      var contentWidthDiff = this.scrollbarWidth ? this.contentWidth - this.computeWidth - this.scrollbarWidth : this.contentWidth - this.computeWidth;
+      //bordered的表格需要减去边框的差值1
+      if (this.props.bordered) {
+        contentWidthDiff = contentWidthDiff - 1;
+      }
       this.setState({ contentWidthDiff: contentWidthDiff, lastShowIndex: lastShowIndex });
     } else {
       this.contentWidth = this.computeWidth;
@@ -381,7 +392,7 @@ var Table = function (_Component) {
       });
     }
 
-    var trStyle = headerHeight ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
+    var trStyle = headerHeight && !fixed ? { height: headerHeight } : fixed ? this.getHeaderRowStyle(columns, rows) : null;
     var drop = draggable ? { onDragStart: onDragStart, onDragOver: onDragOver, onDrop: onDrop, onDragEnter: onDragEnter, draggable: draggable } : {};
     var dragBorder = dragborder ? { onMouseDown: onMouseDown, onMouseMove: onMouseMove, onMouseUp: onMouseUp, dragborder: dragborder, onThMouseMove: onThMouseMove, dragborderKey: dragborderKey } : {};
     var contentWidthDiff = 0;
@@ -740,19 +751,36 @@ var Table = function (_Component) {
       useFixedHeader = true;
 
       // Add negative margin bottom for scroll bar overflow bug
-      var scrollbarWidth = (0, _utils.measureScrollbar)();
+      var scrollbarWidth = this.scrollbarWidth;
       if (scrollbarWidth >= 0) {
         (fixed ? bodyStyle : headStyle).paddingBottom = '0px';
         //显示表头滚动条
         if (headerScroll) {
           if (fixed) {
-            bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
+            //内容少，不用显示滚动条
+            if (this.domWidthDiff <= 0) {
               headStyle.marginBottom = scrollbarWidth + 'px';
+              bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
             } else {
+              innerBodyStyle.overflowX = 'auto';
+            }
+          } else {
+            //内容少，不用显示滚动条
+            if (this.domWidthDiff > 0) {
+              headStyle.overflowX = 'auto';
+            }
             headStyle.marginBottom = '0px';
           }
         } else {
-          (fixed ? bodyStyle : headStyle).marginBottom = '-' + scrollbarWidth + 'px';
+          if (fixed) {
+            if (this.domWidthDiff > 0) {
+              innerBodyStyle.overflowX = 'auto';
+            } else {
+              bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
+            }
+          } else {
+            headStyle.marginBottom = '-' + scrollbarWidth + 'px';
+          }
         }
       }
     }
@@ -913,12 +941,17 @@ var Table = function (_Component) {
     var _props7 = this.props,
         clsPrefix = _props7.clsPrefix,
         height = _props7.height,
-        headerHeight = _props7.headerHeight;
+        headerHeight = _props7.headerHeight,
+        columns = _props7.columns;
 
     var headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll('thead') : this.refs.bodyTable.querySelectorAll('thead');
     var bodyRows = this.refs.bodyTable.querySelectorAll('.' + clsPrefix + '-row') || [];
     var fixedColumnsHeadRowsHeight = [].map.call(headRows, function (row) {
-      return headerHeight ? headerHeight : row.getBoundingClientRect().height || 'auto';
+      var height = headerHeight;
+      if (headerHeight) {
+        height = ((0, _utils.getMaxColChildrenLength)(columns) + 1) * headerHeight;
+      }
+      return headerHeight ? height : row.getBoundingClientRect().height || 'auto';
     });
     var fixedColumnsBodyRowsHeight = [].map.call(bodyRows, function (row) {
       return height ? height : row.getBoundingClientRect().height || 'auto';

build/TableHeader.js

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

build/lib/sum.js

@@ -43,15 +43,17 @@ function sum(Table) {
       _this.currentFooter = function () {
         var data_2 = _this.props.data;
         var columns_sum = _this.props.columns.concat();
-        var sumCol_index = void 0;
+        var sumCol_index = void 0,
+            sumColIndexArr = [];
         //用一个对象存储合计数据，这里合计对象的属性对应每列字段
         for (var i = 0; i < columns_sum.length; i++) {
           if (columns_sum[i].sumCol) {
-            sumCol_index = columns_sum[i].dataIndex;
+            sumColIndexArr.push(columns_sum[i].dataIndex);
-            break;
           }
         }
         var obj = {};
+        sumColIndexArr.forEach(function (sumCol_index) {
+
           obj[sumCol_index] = 0;
           if (Array.isArray(data_2)) {
             for (var _i = 0; _i < data_2.length; _i++) {
@@ -62,7 +64,8 @@ function sum(Table) {
               }
             }
           }
-        obj.key = "sumData";
+          obj.key = sumCol_index + "sumData";
+        });
         obj.showSum = "合计";
         obj = [obj];
         //将设置的和用户传入的合并属性

build/utils.js

@@ -14,6 +14,8 @@ exports.addClass = addClass;
 exports.removeClass = removeClass;
 exports.ObjectAssign = ObjectAssign;
 exports.closest = closest;
+exports.getMaxColChildrenLength = getMaxColChildrenLength;
+exports.getColChildrenLength = getColChildrenLength;
 
 var _warning = require('warning');
 
@@ -163,3 +165,25 @@ function closest(ele, selector) {
   }
   return null;
 }
+
+function getMaxColChildrenLength(columns) {
+  var arr = [];
+  arr = columns.map(function (item, index) {
+    var chilrenLen = 0;
+    if (item.children) {
+      chilrenLen = getColChildrenLength(item.children, chilrenLen + 1);
+    }
+    return chilrenLen;
+  });
+  var max = Math.max.apply(null, arr);
+  return max;
+}
+
+function getColChildrenLength(columns, chilrenLen) {
+  columns.forEach(function (item, index) {
+    if (item.children) {
+      chilrenLen = getColChildrenLength(item.children, chilrenLen + 1);
+    }
+  });
+  return chilrenLen;
+}

demo/demolist/Demo3.js

@@ -1,7 +1,8 @@
 /**
  *
- * @title 表头分组
+ * @title 表头分组并自定义表头高度
  * @description columns[n] 可以内嵌 children，以渲染分组表头。
+ * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
  *
  */
 
@@ -105,8 +106,10 @@ class Demo3 extends Component {
   render() {
     return (
       <Table
+        className={'demo3'}
         columns={columns}
         data={data}
+        headerHeight={40} //自定义表头高度
         bordered
         scroll={{ y: 240 }}
       />

demo/demolist/Demo3.scss

@@ -0,0 +1,6 @@
+.demo3{
+    .u-table-thead th {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+}

dist/demo.css

@@ -8583,7 +8583,13 @@ ul {
     font-weight: normal; }
   .u-table-thead .filter-wrap {
     display: -ms-flexbox;
-    display: flex; }
+    display: flex;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -ms-flex-align: center;
+    align-items: center; }
+    .u-table-thead .filter-wrap .filter-btns {
+      min-width: 58px; }
   .u-table-thead th {
     background: #f7f7f7;
     overflow: hidden;
@@ -8665,10 +8671,10 @@ ul {
   .u-table-filter-column-filter-icon {
     position: absolute;
     top: 3px;
-    right: 2px;
+    right: 18px;
-    width: 25px;
+    width: 22px;
-    height: 38px;
+    height: 25px;
-    line-height: 38px;
+    line-height: 25px;
     z-index: 2;
     background: #f7f7f7; }
     .u-table-filter-column-filter-iconi.uf {
@@ -10302,4 +10308,8 @@ th .drop-menu .uf {
 th:hover .uf {
   visibility: visible; }
 
+.demo3 .u-table-thead th {
+  padding-top: 0px;
+  padding-bottom: 0px; }
+
 /*# sourceMappingURL=demo.css.map */

package.json

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

src/FilterDropDown.js

@@ -52,7 +52,7 @@ class FilterDropDown extends Component {
                 <Item key="3">{locale['end']}</Item>
             </Menu>
         );
-        return (<div>
+        return (<div className="filter-btns">
             {isShowCondition == 'show' && <Dropdown
                 trigger={['click']}
                 overlay={dropmenu}

src/Table.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import TableRow from './TableRow';
 import TableHeader from './TableHeader';
-import { measureScrollbar, debounce, warningOnce } from './utils';
+import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength} from './utils';
 import shallowequal from 'shallowequal';
 import addEventListener from 'tinper-bee-core/lib/addEventListener';
 import ColumnManager from './ColumnManager';
@@ -129,6 +129,10 @@ class Table extends Component {
 
   componentDidMount() {
     setTimeout(this.resetScrollY, 300);
+    //含有纵向滚动条
+    if(this.props.scroll.y){
+       this.scrollbarWidth = measureScrollbar();
+    }
     //后续也放在recevice里面
     if (!this.props.originWidth) {
       this.computeTableWidth();
@@ -196,8 +200,12 @@ class Table extends Component {
   }
 
   computeTableWidth() {
+    
     //如果用户传了scroll.x按用户传的为主
     let setWidthParam = this.props.scroll.x
+    const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
+    let lastShowIndex = computeObj.lastShowIndex;
+    this.computeWidth = computeObj.computeWidth;
     if (typeof (setWidthParam) == 'number') {
       let numSetWidthParam = parseInt(setWidthParam);
       this.contentWidth = numSetWidthParam;
@@ -207,15 +215,18 @@ class Table extends Component {
       this.contentDomWidth = this.contentTable.getBoundingClientRect().width//表格容器宽度
 
       this.contentWidth = this.contentDomWidth;//默认与容器宽度一样
+      this.domWidthDiff = this.contentDomWidth - this.computeWidth;
       if (typeof (setWidthParam) == 'string' && setWidthParam.indexOf('%')) {
         this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100
       }
     }
-    const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
+
-    let lastShowIndex = computeObj.lastShowIndex;
-    this.computeWidth = computeObj.computeWidth;
     if (this.computeWidth < this.contentWidth) {
-      let contentWidthDiff = this.contentWidth - this.computeWidth;
+      let contentWidthDiff = this.scrollbarWidth?this.contentWidth - this.computeWidth-this.scrollbarWidth:this.contentWidth - this.computeWidth;
+      //bordered的表格需要减去边框的差值1
+      if(this.props.bordered){
+        contentWidthDiff = contentWidthDiff-1;
+      }
       this.setState({ contentWidthDiff, lastShowIndex });
     } else {
       this.contentWidth = this.computeWidth;
@@ -290,7 +301,7 @@ class Table extends Component {
       });
     }
 
-    const trStyle = headerHeight ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
+    const trStyle = headerHeight&&!fixed ? { height: headerHeight } : (fixed ? this.getHeaderRowStyle(columns, rows) : null);
     let drop = draggable ? { onDragStart, onDragOver, onDrop, onDragEnter, draggable } : {};
     let dragBorder = dragborder ? { onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey } : {};
     let contentWidthDiff = 0;
@@ -645,19 +656,38 @@ class Table extends Component {
       useFixedHeader = true;
 
       // Add negative margin bottom for scroll bar overflow bug
-      const scrollbarWidth = measureScrollbar();
+      const scrollbarWidth = this.scrollbarWidth;
       if (scrollbarWidth >= 0) {
         (fixed ? bodyStyle : headStyle).paddingBottom = '0px';
         //显示表头滚动条
         if(headerScroll){
           if(fixed){
-            bodyStyle.marginBottom = `-${scrollbarWidth}px`;
+           //内容少，不用显示滚动条
+           if(this.domWidthDiff <= 0){
               headStyle.marginBottom = `${scrollbarWidth}px`;
+              bodyStyle.marginBottom = `-${scrollbarWidth}px`;
             }else{
+              innerBodyStyle.overflowX = 'auto';
+            }
+          }else{
+               //内容少，不用显示滚动条
+               if(this.domWidthDiff > 0){
+                headStyle.overflowX = 'auto';
+              }
             headStyle.marginBottom = `0px`;
           }
         }else{
-          (fixed ? bodyStyle : headStyle).marginBottom = `-${scrollbarWidth}px`;
+          if(fixed){
+            if(this.domWidthDiff > 0){
+              innerBodyStyle.overflowX = 'auto';
+            }else{
+              bodyStyle.marginBottom = `-${scrollbarWidth}px`;
+            }
+            
+          }else{
+            headStyle.marginBottom = `-${scrollbarWidth}px`;
+          }
+          
         }
       }
     }
@@ -795,13 +825,18 @@ class Table extends Component {
 
   syncFixedTableRowHeight() {
     //this.props.height、headerHeight分别为用户传入的行高和表头高度，如果有值，所有行的高度都是固定的，主要为了避免在千行数据中有固定列时获取行高度有问题
-    const { clsPrefix, height, headerHeight } = this.props;
+    const { clsPrefix, height, headerHeight,columns } = this.props;
     const headRows = this.refs.headTable ?
       this.refs.headTable.querySelectorAll('thead') :
       this.refs.bodyTable.querySelectorAll('thead');
     const bodyRows = this.refs.bodyTable.querySelectorAll(`.${clsPrefix}-row`) || [];
     const fixedColumnsHeadRowsHeight = [].map.call(
-      headRows, row => headerHeight ? headerHeight : (row.getBoundingClientRect().height || 'auto')
+      headRows, row =>{ 
+        let height = headerHeight; 
+        if(headerHeight){
+          height = (getMaxColChildrenLength(columns)+1)*headerHeight;
+        }
+        return headerHeight ? height : (row.getBoundingClientRect().height || 'auto')}
     );
     const fixedColumnsBodyRowsHeight = [].map.call(
       bodyRows, row => height ? height : (row.getBoundingClientRect().height || 'auto')

src/Table.scss

@@ -282,6 +282,11 @@ $table-move-in-color: $bg-color-base;
     }
     .filter-wrap{
       display: flex;
+      justify-content: center;
+      align-items: center;
+      .filter-btns{
+        min-width: 58px;
+      }
     }
     th{
       background: $table-head-background-color;
@@ -413,8 +418,8 @@ $table-move-in-color: $bg-color-base;
       top: 3px;
       right: 18px;
       width: 22px;
-      height: 30px;
+      height: 25px;
-      line-height: 30px;
+      line-height: 25px;
       z-index: 2;
       background: #f7f7f7;
       &i.uf{

src/TableHeader.js

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

src/lib/sum.js

@@ -27,15 +27,16 @@ export default function sum(Table) {
     currentFooter = () => {
       let data_2 = this.props.data;
       let columns_sum = this.props.columns.concat();
-      let sumCol_index;
+      let sumCol_index,sumColIndexArr=[];
       //用一个对象存储合计数据，这里合计对象的属性对应每列字段
       for (let i = 0; i < columns_sum.length; i++) {
         if (columns_sum[i].sumCol) {
-          sumCol_index = columns_sum[i].dataIndex;
+          sumColIndexArr.push(columns_sum[i].dataIndex);
-          break;
         }
       }
       let obj = {};
+      sumColIndexArr.forEach(sumCol_index=>{
+        
         obj[sumCol_index] = 0;
         if (Array.isArray(data_2)) {
           for (let i = 0; i < data_2.length; i++) {
@@ -49,7 +50,9 @@ export default function sum(Table) {
             }
           }
         }
-      obj.key = "sumData";
+        obj.key = sumCol_index+"sumData";
+        
+      })
       obj.showSum = "合计";
       obj = [obj];
       //将设置的和用户传入的合并属性

src/utils.js

@@ -143,3 +143,26 @@ export function closest(ele, selector) {
   }
   return null;
 }
+
+
+export function getMaxColChildrenLength(columns){
+  let  arr=[];
+  arr = columns.map((item,index)=>{
+    let chilrenLen = 0;
+    if(item.children){
+      chilrenLen = getColChildrenLength(item.children,chilrenLen+1)
+    }
+    return chilrenLen
+  })
+  var max = Math.max.apply(null,arr);
+  return max;
+} 
+
+export function getColChildrenLength(columns,chilrenLen){
+  columns.forEach((item,index)=>{
+    if(item.children){
+      chilrenLen = getColChildrenLength(item.children,chilrenLen+1);
+    }
+  })
+  return chilrenLen;
+}