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

2018-11-13 19:01:02 +08:00 · 2018-11-13 19:01:02 +08:00 · b941e33150
parent 0ff0fe34e9 1931b7cbd3
commit b941e33150
21 changed files with 430 additions and 183 deletions
--- a/CHANGELOG.md
+++ b/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)

--- a/build/FilterDropDown.js
+++ b/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"],
                {
--- a/build/Table.css
+++ b/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;
-    line-height: 30px;
+    height: 25px;
+    line-height: 25px;
    z-index: 2;
    background: #f7f7f7; }
    .u-table-filter-column-filter-iconi.uf {
--- a/build/Table.js
+++ b/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';
-            headStyle.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';
--- a/build/TableHeader.js
+++ b/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;
--- a/build/lib/sum.js
+++ b/build/lib/sum.js
@ -43,26 +43,29 @@ 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;
-            break;
+            sumColIndexArr.push(columns_sum[i].dataIndex);
          }
        }
        var obj = {};
-        obj[sumCol_index] = 0;
-        if (Array.isArray(data_2)) {
-          for (var _i = 0; _i < data_2.length; _i++) {
-            if (typeof data_2[_i][sumCol_index] == "number" || !isNaN(data_2[_i][sumCol_index])) {
-              obj[sumCol_index] -= -data_2[_i][sumCol_index];
-            } else {
-              obj[sumCol_index] = "";
+        sumColIndexArr.forEach(function (sumCol_index) {
+
+          obj[sumCol_index] = 0;
+          if (Array.isArray(data_2)) {
+            for (var _i = 0; _i < data_2.length; _i++) {
+              if (typeof data_2[_i][sumCol_index] == "number" || !isNaN(data_2[_i][sumCol_index])) {
+                obj[sumCol_index] -= -data_2[_i][sumCol_index];
+              } else {
+                obj[sumCol_index] = "";
+              }
            }
          }
-        }
-        obj.key = "sumData";
+          obj.key = sumCol_index + "sumData";
+        });
        obj.showSum = "合计";
        obj = [obj];
        //将设置的和用户传入的合并属性
--- a/build/utils.js
+++ b/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');

@ -162,4 +164,26 @@ 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;
 }
--- a/demo/demolist/Demo3.js
+++ b/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 }}
      />
--- a/demo/demolist/Demo3.scss
+++ b/demo/demolist/Demo3.scss
@ -0,0 +1,6 @@
+.demo3{
+    .u-table-thead th {
+        padding-top: 0px;
+        padding-bottom: 0px;
+    }
+}
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/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;
-    width: 25px;
-    height: 38px;
-    line-height: 38px;
+    right: 18px;
+    width: 22px;
+    height: 25px;
+    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 */
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map
--- a/package.json
+++ b/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",
--- a/src/FilterDropDown.js
+++ b/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}
--- a/src/Table.js
+++ b/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`;
-            headStyle.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')
--- a/src/Table.scss
+++ b/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;
-      line-height: 30px;
+      height: 25px;
+      line-height: 25px;
      z-index: 2;
      background: #f7f7f7;
      &i.uf{
--- a/src/TableHeader.js
+++ b/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`
--- a/src/lib/sum.js
+++ b/src/lib/sum.js
@ -27,29 +27,32 @@ 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;
-          break;
+          sumColIndexArr.push(columns_sum[i].dataIndex);
        }
      }
      let obj = {};
-      obj[sumCol_index] = 0;
-      if (Array.isArray(data_2)) {
-        for (let i = 0; i < data_2.length; i++) {
-          if (
-            typeof data_2[i][sumCol_index] == "number" ||
-            !isNaN(data_2[i][sumCol_index])
-          ) {
-            obj[sumCol_index] -= -data_2[i][sumCol_index];
-          } else {
-            obj[sumCol_index] = "";
+      sumColIndexArr.forEach(sumCol_index=>{
+        
+        obj[sumCol_index] = 0;
+        if (Array.isArray(data_2)) {
+          for (let i = 0; i < data_2.length; i++) {
+            if (
+              typeof data_2[i][sumCol_index] == "number" ||
+              !isNaN(data_2[i][sumCol_index])
+            ) {
+              obj[sumCol_index] -= -data_2[i][sumCol_index];
+            } else {
+              obj[sumCol_index] = "";
+            }
          }
        }
-      }
-      obj.key = "sumData";
+        obj.key = sumCol_index+"sumData";
+        
+      })
      obj.showSum = "合计";
      obj = [obj];
      //将设置的和用户传入的合并属性
--- a/src/utils.js
+++ b/src/utils.js
@ -142,4 +142,27 @@ 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;
 }